html渐变遮罩效果,CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变

遮罩蒙版效果如图：

要实现遮罩蒙版效果需要两张图

这是原图1  这是原图2

效果图如下：

  

mask属性：目前只支持webkit核心的浏览器

-webkit-mask-image:url|gradient(渐变效果);

-webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;

-webkit-mask-position:x

y;(蒙版的起始位置)

-webkit-mask-clip:border|padding|content;(简单的说就是蒙版的裁剪位置)

-webkit-mask-origin:border|padding|content;(简单的说就是蒙版的原点位置)

代码如下

遮罩蒙版

.con {

height: 500px;

background: url('01.jpg');

-webkit-mask: url('text.png') 50% 50% no-repeat;

-moz-mask: url('text.png') 50% 50% no-repeat;

-ms-mask: url('text.png') 50% 50% no-repeat;

-o-mask: url('text.png') 50% 50% no-repeat;

mask: url('text.png') 50% 50% no-repeat;

}

从上面我们可以得出什么结论？

为什么会显示出多边形呢，看如下图

结论：形状觉得蒙板的样式，颜色对图像没有任何影响，不透明的部分为显示区域，透明部分为隐藏区域，半透明区域半透明显示(这一个就不再这里提了)。

渐变效果如下：

CSS更改蒙版的渐变的代码如下

蒙板渐变模式

.con {

height: 500px;

width: 500px;

-webkit-mask-image: -webkit-radial-gradient(50% 50%,rgba(255,204,0,0),rgba(0,0,0,1));

}

.con img {

width: 400px;

height: 400px;

}

但是蒙板是能够应用渐变，但是因为浏览器的兼容问题比较严重，通常不使用渐变作为蒙板的属性值，而是使用“透明梯度”的图片替代渐变，产生同样的功能。

 

转发至微博

转发至微博