查看更多精彩前端资源

【前言】

       mask-image是一个很新的东西，因为新所以支持它的浏览器就少，但是它很好用，该属性现在仅仅被webkit以私有属性支持。

       一般来说mask-image需要一张有透明部分的图片，该图片用于遮挡在指定的dom上，被图片透明部分遮住的部分将不被显示，被不透明部分遮住的部分将显示。显示的是背景图片或者背景色。也就说我们只要一张图片即可显示不同颜色效果。

【语法】

       它的属性值与background的语法基本一样，相关的属性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。这里就不详细介绍，直接看下面demo

【图片蒙版】

• Demo1
  

     

[CSS] 纯文本查看 复制代码

  .itcast1{[/align]              width: 225px;
              height: 123px;
              background :url("logo.png") no-repeat;
          -webkit-mask: url("mask.png") no-repeat center;
       }

这里需要注意的是第二张mask.png中黑色部分的透明度（alpha）值为1，将完全显示其下方的图片区域，而其余部分的透明度为0（alpha值），将完全覆盖其下方的图片区域。

• Demo2
  

其属性值为CSS渐变老式语法：-webkit-gradient(<type>, <point> [,<radius>]?, <point> [, <radius>]? [, <stop>]*)

[CSS] 纯文本查看 复制代码

.itcast1{
              width: 225px;
              height: 123px;
              background :url("logo.png") no-repeat;
          -webkit-mask: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
       }

【兼容性】

目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器，但是相信在不久的未来这一属性将被其他主流浏览器所支持

查看更多精彩前端资源

【前言】

       mask-image是一个很新的东西，因为新所以支持它的浏览器就少，但是它很好用，该属性现在仅仅被webkit以私有属性支持。

       一般来说mask-image需要一张有透明部分的图片，该图片用于遮挡在指定的dom上，被图片透明部分遮住的部分将不被显示，被不透明部分遮住的部分将显示。显示的是背景图片或者背景色。也就说我们只要一张图片即可显示不同颜色效果。

【语法】

       它的属性值与background的语法基本一样，相关的属性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。这里就不详细介绍，直接看下面demo

【图片蒙版】

• Demo1
  

     

[CSS] 纯文本查看 复制代码

  .itcast1{[/align]              width: 225px;
              height: 123px;
              background :url("logo.png") no-repeat;
          -webkit-mask: url("mask.png") no-repeat center;
       }

这里需要注意的是第二张mask.png中黑色部分的透明度（alpha）值为1，将完全显示其下方的图片区域，而其余部分的透明度为0（alpha值），将完全覆盖其下方的图片区域。

• Demo2
  

其属性值为CSS渐变老式语法：-webkit-gradient(<type>, <point> [,<radius>]?, <point> [, <radius>]? [, <stop>]*)

[CSS] 纯文本查看 复制代码

.itcast1{
              width: 225px;
              height: 123px;
              background :url("logo.png") no-repeat;
          -webkit-mask: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
       }

【兼容性】

目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器，但是相信在不久的未来这一属性将被其他主流浏览器所支持