CSS遮罩——如何在CSS中使用遮罩

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

特别声明:此篇文章由D姐根据Christian Schaefer的英文文章原名《CSS Masks – How To Use Masking In CSS Now》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://thenittygritty.co/css-masking以及作者相关信息

——作者:Christian Schaefer

——译者:D姐

大概一年前,我写过一篇文章介绍有关webkit中新的css技术——css滤镜,如果其他浏览器不能支持的话会,这是个麻烦。

有关于Webkit中的滤镜,大家要是感兴趣的话可以阅读《CSS3 Filter的十种特效》一文,里面介绍了filter十种特效。

——大漠

今天我想说的另一个只有webkit才有的特性,并向你们展示他是如何跨浏览器的:他就是css遮罩(CSS Masks)。

CSS Masks

Css遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。

CSS遮罩——如何在CSS中使用遮罩

图像是由rgb三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道,alpha通道,通过亮度定义每个像素上的透明度。白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明。你可以看到下面的图片

CSS遮罩——如何在CSS中使用遮罩

给一个html元素使用css遮罩,就会这样处理。不用给图片应用一个alpha通道,只需要给一个图片运用一个-webkit-mask-image的css属性。例如:-webkit-mask-image: url(mouse.png);他从图片遮罩里读出图片的透明信息,然后应用到html元素上,就像下面显示的图片

CSS遮罩——如何在CSS中使用遮罩

遮罩可以让头像按照特定形状显示。

这么做有什么好处呢?遮罩可以使得图片按照任意的形状显示。或者你可能有很长的文本需要滚动显示,那么可以使用遮罩让他从不透明到透明的渐变显示。

CSS遮罩——如何在CSS中使用遮罩

你也可以用background-image属性,或是css的渐变属性,代替一个实际的位图,代码示例如下:

-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));	

注意:这种旧的语法很快被新语法linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))取代(目标关键字改变成to bottom)。LennartSchoors有一篇关于这个问题的短文

当苹果把css遮罩带给webkit时,未能将他的实现细节和文件与w3c达成一致。所以意味着,如果其他供应商想要实现遮罩效果,他们就不得不首先反向编译,找出所有的实现细节。这种工作没有人愿意做。所以直到几天前,2012年11月15号,遮罩第一次出现在w3c公布的草案中。但是跟苹果公司的是不同的版本。

好消息是:其他浏览器有类似功能,用不同的实现方式实现webkit属性中的css遮罩。

模拟一个简单-webkit-mask-image的跨浏览器遮罩效果

我们可以让html元素如下图显示成米老鼠头像的样子:

CSS遮罩——如何在CSS中使用遮罩

CSS遮罩——如何在CSS中使用遮罩

我们让html使用webkit专有的css遮罩效果:

<div class="element">
  <p>Lorem ipsum dolor sit … amet.</p>
</div>	

定义如下样式:

.element {
  width: 400px;
  height: 300px;
  overflow: hidden;
  color: #fff;
  background: url(background.png);
  -webkit-mask-image: url(mouse.png);
}	

现代浏览器

我们看一下现代浏览器,支持html技术的浏览器,可以在html内部解析svg,像这样:

<!DOCTYPE html>
<html>
<body>
  <svg width="300px" height="300px">
    <circle cx="125" cy="150" r="50" fill="pink" stroke="green" stroke-width="5" />
  </svg>
</body>
</html>	

最重要的是webkit也跟firefox和opera一样,提供一个相反的操作:就是把xthml嵌入到svg里,多亏svg1.1的扩展特性和<foreignObject>元素

<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="400px" height="300px">

    <!-- HTML begin -->
    <div class="element">
      <p>Lorem ipsum dolor sit … amet.</p>
    </div>
    <!-- HTML end -->

  </foreignObject>
</svg>	

Ie9和ie10是唯一现代浏览器不支持<foreignObject>元素的,我们将在后面讨论ie的问题。

内联的svg和<foreignObject>元素可以在svg包装器里面附上页面的一部分html代码,这样就可以让html块呈现成我们想要的遮罩样子

CSS遮罩——如何在CSS中使用遮罩

<!DOCTYPE html>
<html>
<head>
  <style>
    .element {
      width: 400px;
      height: 300px;
      overflow: hidden;
      color: #fff;
      background: url(background.png);
      -webkit-mask-image: url(mouse.png);
    }
  </style>
</head>
<body>

  <!-- SVG wrapper begins -->
  <svg>
    <foreignObject width="400px" height="300px">

      <!-- inner HTML begins -->
      <div class="element">
        <p>Lorem ipsum dolor sit … amet.</p>
      </div>
      <!-- inner HTML ends -->

    </foreignObject>
  </svg>
  <!-- SVG wrapper ends -->

</body>
</html>	

下一步是在svg里面定义svg遮罩,我们可以定义遮罩图片,然后通过style="mask:[mask id]"应用到内嵌的html或是foreignObject上

<!DOCTYPE html>
<html>
<body>

  <!-- SVG begins -->
  <svg>

    <!-- Definition of a mask begins -->
    <defs>
      <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
        <image width="400px" height="300px" xlink:href="mouse.png"></image>
      </mask>
    </defs>
    <!-- Definition of a mask ends -->

    <foreignObject width="400px" height="300px" style="mask: url(#mask);">

      <!-- HTML begins -->
      <div class="element">
        <p>Lorem ipsum dolor sit … amet.</p>
      </div>
      <!-- HTML ends -->

    </foreignObject>
  </svg>
  <!-- SVG ends --
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-masking.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部