css3的新属性遮罩蒙版mask

1111效果:图片蒙版(-webkit-mask-image

css3的新属性遮罩蒙版mask_第1张图片


我们可以看出其实他是有两个图片拼成的。

+css3的新属性遮罩蒙版mask_第2张图片


这个是剪切的一个图片让他成蒙版的形状。你也可以用文字来实现。

css3的新属性遮罩蒙版mask_第3张图片

   注意注意这个作为遮罩蒙版的图片必须是png的。

使用方法:



三九架歼击机经济界斤斤计较经济界斤斤计较经济界斤斤计较经济界经济 机动弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道弹道导弹女



.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)));

}


还有种方法也可以实现上面的效果。

我们在文字的上面放一个渐变的图层让他挡住下面的文字。

常见的页面效果是:

css3的新属性遮罩蒙版mask_第4张图片

这里是文字文章这里是文字文章这里是文字文章


     

            阅读全文
 


.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))

}

你可能感兴趣的:(css)