实现文字背景图片

最近在实现一个手机上黑板的效果,黑板上的文字都是粉笔效果这个如果放在以前的确很为难,这样子弄只能所有文字都切成一张张透明的图片,但幸好现在高端智能手机已经支持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