HTML5培训

CSS3跨平台开发之文本遮罩层(-webkit-mask)与任意颜色字体

发布时间:2013年 08月 19日   |  作者:李宗亮

CSS3 半透明遮罩层

在手机程序中,经常会看到一个效果--遮罩层。一般用来表示下面还有内容可以通过手机划屏操作拖出下面的内容,如下图。

大家可以很清楚的看到,在文字的下方有一个半透明的遮罩层,传统的思路会考虑加一个层,实际上加层不但在代码上要复杂,在事件处理上也麻烦了很多,我们可以用一个很简单的css3属性来搞定。

 -webkit-mask-

上面的实例所用的代码是:-webkit-mask-image:-webkit-gradient(linear, 0100%, 090%, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));

也是用了线性渐变做蒙版,这个非常类似之前的 倒影,关于蒙版层的展示,在css3倒影这个博文里介绍的比较详细,这个不多做介绍了。

 

CSS3 任意 颜色字体

首先,我们把常用的字体放在一个比较鲜艳的(我们想要的颜色)背景上,如下:


<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 

        <style>

        html,body,p {margin:0;padding:0;}

        p {width:700px;height:50px;font-size:40px;font-weight:bold;line-height:50px;text-align:center;

        background-image:-webkit-gradient(linear,0 0,100% 0,from(rgba(255,0,0,0.9)),color-stop(0.3,rgba(0,255,0,0.8)),color-stop(0.5,rgba(0,0,255,1)),color-stop(0.8,rgba(0,0,0,0.5)),to(yellow));

        }

        </style>

</head>

    <body>

    <p>梨花院落溶溶月,柳絮池塘淡淡风。</p>

    </body>

</html>


效果如图:

 然后我们把背景图实用background-clip属性截取。把文字设置透明。

在CSS中加入:       -webkit-background-clip:text;color:transparent;

第一句,截取文本的背景图 ,第二句,把文字透明。然后就得到我们想要的效果:

(关于background-clip是背景图截取的设置,我们常用的padding,content,border,这里暂不详述。目前项目中很少用到。)


相关文章
less语言特性(一) ——
CSS3的Transform-style和Perspe
CSS3 Grid布局
应用于移动端WebApp开发的
css3制作圆形播放进度条
CANVAS使用clip有锯齿的解决
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0504059791565s)