Image placeholder

使用background-clip属性设置文本背景和渐变效果

Image placeholder
F2EX 2016-11-13

background-clip-text
无需任何插件或者javascript,使用CSS3中的background-clip属性即可为文本设置背景和渐变效果,还可以对其增加动画效果。
该技术实现起来非常简单。 我们只需要添加一个背景(可以是渐变或图像)到我们想要影响的文本。就像下面这样:


h1 {
  background:url(image_url_here);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}    

示例:

hover状态下,背景图动画效果
<h1>这是示例1:hover状态下,背景图动画效果</h1>

body {
  padding-top:50px;
  background:url(网页背景图片地址.jpg);

  /* 设置图片 100% 宽度 */
  background-size:cover; 
}

h1 {
  font-family:'PingFangSC-Light';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 设置背景图 */
  background:url(字体背景图片地址.jpg);
  background-position:bottom;
  background-size:cover;

  /* 设置动画速度 */
  transition:2s ease all;
}

h1:hover {
  background-position:top;
}
渐变动画
<h1>这是示例2:渐变动画</h1>

body {
  padding-top:50px;
  background:url(网页背景图片地址.jpg);

  /* 设置图片 100% 宽度 */
  background-size:cover; 
}

h1 {
  font-family:'PingFangSC-Light';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 设置背景渐变 */
  background:-webkit-linear-gradient(top, #2c539e 0%,#37AAC6 50%,#2c539e 100%);

  /* 设置动画 */
  -webkit-animation:moving 20s ease infinite;
}

/* 创建动画 */
@-webkit-keyframes moving {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 500px;
  }
}​
背景图动画
<h1>这是示例3:背景图动画</h1>

body {
  padding-top:50px;
  background:url(网页背景图片地址.jpg);

  /* 设置图片 100% 宽度 */
  background-size:cover; 
}

h1 {
  font-family:'PingFangSC-Light';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 使用渐变的背景图 */
  background:url(字体渐变背景图.jpg);
  background-size:cover;

  /* 设置动画 */
  -webkit-animation:moving 20s ease infinite;
}

/* 创建动画 */
@-webkit-keyframes moving {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 500px;
  }
}​

Demo


2017-08-07