Just Do & Write it !

0%

实现文字背景图片

Posted on Edited on In

最近在实现一个手机上黑板的效果，黑板上的文字都是粉笔效果这个如果放在以前的确很为难，这样子弄只能所有文字都切成一张张透明的图片，但幸好现在高端智能手机已经支持CSS3，那么我们就利用CSS3属性来实现粉笔字的效果。

Blackboard

背景裁剪和字体透明

实现粉笔字的效果其实就是简单的利用背景裁剪和字体透明，最直接的思路就是设置文字的背景图片，但在CSS3并不支持文字设置背景图片而这个时候我们可以采用-webkit-background-clip 和 -webkit-text-fill-color: transparent。

那我们大致理解了原理之后，就开始动工了。笔者随便弄了张噪点的背景图（不太会PS，将就将就吧，我们看实现的过程不看结果。T_T）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.blackboard-wrap {
  background-color: #2f4e31;
  width:100%;
}

.blackboard-wrap .blackboard {
  margin:auto;
  padding: 20px;
  width: 400px;
  font-size: 62px;
  font-weight: bolder;
  background-image: url(http://inhu.qiniudn.com/blackboard-font-bg.png);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

兼容问题!!

使用最新最潮的技术免不了要付出点兼容的代价，虽然在手机上大部分浏览器已经支持background-clip了，但仍不支持裁剪到text的程度。所以免不了有些手机只看到背景图片连文字都看不到，这时候我们就需要请出 modernizr 来做兼容处理。

1
2
3
4
/** 判断是否支持background-clip:text,如果不支持在body上添加不支持的类 */
if(!Modernizr.testAllProps('backgroundClip', 'text')){
    document.getElementsByTagName('body')[0].className +=" not-support-bgclip-text";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.blackboard-wrap {
  background-color: #2f4e31;
  width:100%;
}

.blackboard-wrap .blackboard {
  margin:auto;
  padding: 20px;
  width: 400px;
  font-size: 62px;
  font-weight: bolder;
  background-image: url(http://inhu.qiniudn.com/blackboard-font-bg.png);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.not-support-bgclip-text .blackboard-wrap .blackboard { //降级处理
    background:transparent;
    color:#efefef; 
}

更多好玩的

利用CSS3这两个新的特性，我们不仅仅可以做个黑板粉笔字，还可以实现彩虹、渐变等字体的样式。更多的玩法大家可以琢磨琢磨。

JS Bin