css3的新属性遮罩蒙版mask
1111效果：图片蒙版（-webkit-mask-image）
我们可以看出其实他是有两个图片拼成的。
+
这个是剪切的一个图片让他成蒙版的形状。你也可以用文字来实现。
注意注意这个作为遮罩蒙版的图片必须是png的。
使用方法：
<div class="element">
<!--1，如果用图片,你可以直接在css上面把背景图设置成那个图片。他会被剪切成遮罩层的形状--><!--<img src="images/goods.jpg"/>--没用的，不用写>
<!--2，如果用文字-->
三九架歼击机经济界斤斤计较经济界斤斤计较经济界斤斤计较经济界经济 机动弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道导弹女
</div>
.element{
width:130px;
height:100px;
overflow:hidden;
background:url(images/goods.jpg); //这个是后面的背景图。如果里面是文字，他的背后还是可以看到那个背景的。
-webkit-mask-image: url(images/earth.png); //这是遮罩的那个轮廓
}
222效果：渐变蒙版（-webkit-mask）
.element{
width:190px;
height:100px;
font-size:14px;
overflow: hidden;
-webkit-mask : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
还有种方法也可以实现上面的效果。
我们在文字的上面放一个渐变的图层让他挡住下面的文字。
常见的页面效果是：
<article>这里是文字文章这里是文字文章这里是文字文章</article>
<div class="readall_box" >
<div class="read_more_mask"></div>
<a class="btn btn-large btn-gray-fred read_more_btn" target="_self">阅读全文</a>
</div>
.article{height:320px} //给文章设置一个高度。点击阅读全文时去掉这个class。
.readall_box {
position: relative;
z-index: 9999;
padding: 0 0 25px;
margin-top: -260px;
text-align: center;
}
.read_more_mask{
height:200px;
background：-webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0),to(#fff)));
background -moz-linear-gradient(bottom, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
background -o-linear-gradient(bottom, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0))
}