PHP教程 Css教程 操作系统 数据库

  
Lorem ipsum dolor sit … amet.

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

  
    
    
      
Lorem ipsum dolor sit … amet.
    

  


  
  
Lorem ipsum dolor sit … amet.
      

  
  
Lorem ipsum dolor sit … amet.
      

  
  
  
  
  
  
  
  
    
Lorem ipsum dolor sit … amet.
  

这个很cool，因为它实际是一个自动优雅降级。

Ie9和ie10有一个问题。他们都识别svg，但是都不知道元素。他们渲染svg，但是把它作为的一部分，而是无效svg标签。所以这部分就跟svg一起失效啦。意思是：我们的内容是迷惑我们的读者，所以整个去掉。这样不好。

我们考虑可以用条件注释在ie里面隐藏svg部分，但是微软决定在ie10里去掉条件注释。所以目前还没有解决办法。

唯一的解决办法是

    用支持svg扩展和元素的客户端测试;
    用js渲染svg片段支持svg扩展。

这段js是我们需要的，把它加到页面的头部

function head () {
  if (window.SVGForeignObjectElement) {
    document.write('\
      \
        \
          \
            \
          \
        \
        \
    ');
  }
}
function foot () {
  if (window.SVGForeignObjectElement) {
    document.write('\
        \
      \
    ');
  }
}

在我们的html结构中需要调用这些js函数替换原来的svg部分

  
  
    
Lorem ipsum dolor sit … amet.
  
  

现在内容在所有的ie浏览器将保持一致。IE11应该支持，我们拭目以待吧。

注1:你看到在每行最后字符串内部的反斜杠，容许多行字符串。他们得到每个浏览器和官方ecmascript5标准的支持。

注2：document.write是最好的js实践吗？那是个疯子，那为什么还使用他？凡事没有绝对的对错，完全依赖于使用的环境。如果你在外部js文件利用document.write，是个很糟糕的事情。document.write迫使在html中预加载的地方嵌入外部脚步文件，同时阻止他们尝试任何异步加载。这意味着如果这些外部脚步加载失败，你的页面就会戛然而止。但是我们在这里不处理外部文件，你应该把它放到一边。没有阻塞。另外，由于javascript拥有输出额外标签到屏幕，当html解析器运行中，你不会成为短暂的CSS样式失效的目击者

    什么是FOUC？

    flash of unstyled content (FOUC) 它指的是在某些情况下，IE在加载网页时会出现短暂的CSS样式失效。

    什么是FOUC(文档样式短暂失效)?

    如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.


我们到这里很高兴也可以就此打住了。但是如何让ie也支持css遮罩呢？那么，我们走。。。

Ie4-9有一个叫做Chroma的过滤器。它类似与电影拍摄中用的视频混合技术：就是透过一定颜色然后让元素同色的部分从屏幕上消失。这种颜色因此叫做颜色遮罩

下面的css代码会让元素上的所有青色部分消失

filter: progid:DXImageTransform.Microsoft.Chroma(color='cyan');
zoom: 1; /* Needed in IE < 8 */    

为什么是青色？这里仅仅是个建议。你可以使用任何颜色，作为你想要的遮罩颜色，而不是必须是青色。但是这个颜色必须是一个单独的，没有用到其他地方的颜色。所以跟内容混合的颜色不应该作为遮罩颜色。

现在，有个更有意思的事情，chroma过滤器事实上不仅仅会过滤元素本身的颜色，还会过滤他孩子元素的颜色。因为应用下面的样式会创建一个10px宽的框。

.parent {
  width: 120px;
  background-color: #eee;
  filter: progid:DXImageTransform.Microsoft.Chroma(color='cyan');
  zoom: 1;
}
.child {
  height: 100px;
  margin: 10px;
  background-color: cyan;
}

对应的标记：

青色区域的子元素会过滤父元素，我们将会透过青色区域它看父元素。

还是回到我们的米老鼠头像的例子，我们需要做的是创建一个米老鼠头像形状的图片，这个图片需要外部是青色的，里面的形状是透明的，如图所示。

在photoshop中需要做下面的事情：

    打开现有的svg遮罩的png图片
    按住ctrl键或是cmd (mac中)，点击图层面板中的图层0
    按下Backspace或del键移除白色部分
    从选择菜单中选择反相
    点击前景色，把他颜色值改为#00FFFF (RGB: 0,255,255)
    从编辑菜单中选择填充，把前景色填充
    选择文件菜单里面的保存成web
    在保存为web对话框里选择png-8格式，带有2个颜色值和透明度
    保存为一个单独的文件，如mouse-cyan.png

我们只保存两个颜色，是为了消除形状边界的锯齿。这么做的目的是因为chroma过滤器只能过滤单一颜色。

现在我们需要把图片放到想要产生遮罩效果的元素上，就像下图一样

我们面临的一个难题是：我们需要完成的这个效果，不能使用css中的定位属性。为什么？因为ie的过滤器遇到定位元素就不起作用了。所以最好的解决方式是使用负边距，让青色遮罩移动到元素上。例如：

  
Lorem ipsum dolor sit … amet.

现在你可以过滤了

  
    
Lorem ipsum dolor sit … amet.
  
  

这项技术的一个遗憾事情是，微软决定从ie10里移除所有的专有过滤器，除了条件注释。他们也移除了所有的遗留模式。所以这个解决方案也仅限于IE4-9。

为了让ie都有效果，我们需要扩展我们的javascript

function head () {
  if(window.SVGForeignObjectElement) {
    document.write('\
      \
        \
          \
            \
          \
        \
        \
    ');
  } else {
    document.write('\
      \
    ');
  }
}
function foot () {
  if(window.SVGForeignObjectElement) {
    document.write('\
        \
      \
    ');
  } else {
    document.write('\
        \
      \
    ');
  }
}

所以如果在svg里包裹的元素支持，如果不支持我们可以转成IE浏览器的过滤器实现。最后所有浏览器都实现了css遮罩效果，除了IE10浏览器。还是相当不错的，是不是？这是最终效果

Mouse shaped mask

注意，这时当你需要硬性按照图片形状裁剪的最好方法。你可能对软性遮罩裁剪也感兴趣，只不过没有ie支持，因为chroma过滤器没有过滤软边的能力。

在任何情况下，都不要忘了检查没有应用遮罩的输出效果是否优雅降级。因为有ie10不支持遮罩，而且javascript也可能被禁用。

我确实说过“除了一个浏览器其他浏览器都支持吗？”我撒谎了。对于桌面浏览器是真的。大多数的移动webkit浏览器仍然落后于前沿技术。不仅是Android系统，苹果系统的safari对于svg支持的也不是很好。所以对于他们需要使用-webkit-mask-image.做加倍的svg遮罩。我们可以在样式表中这样做

.element {
 
 
  overflow: hidden;
  background: #36f url(background.png);
  color: #fff;
  -webkit-mask-image: url(mouse.png);
}    

最后我们做到了。

线渐变遮罩

记得一开始我说过，你也可以使用渐变做遮罩。这也可能在上述浏览器都适用，那我们之前的步骤需要做一些调整。首先我们需要用一个渐变图片或是用一个纯的svg路径，然后定义一个svg矩形，用svg渐变填充，来代替svg遮罩内容

 
这个代表渐变从上到下的方向(从(0,0)点到(0,1)点)，第一个点的位置是完全不透明的白色，第二个点是完全透明的白色

对于ie我们不再需要青色图片，因为我们这次不使用chroma过滤器，而是使用alpha过滤器。过去我们使用alpha过滤器，是为了弥补老的ie浏览器没有opacity属性。但是他的能力远远不至于此。你可以把他运用到渐变模式上，定义开始和结束点，也可以定义开始和结束的透明度。这是一个简单的例子：

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,FinishX=0,StartY=0,FinishY=300);    
这个渐变样式alpha过滤器开始于点(0,0)扩展到(0,300).开始透明度是100%，结束透明度是0%。

移动webkit我们通常很容易这样实现

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

事实证明Android 2.0不支持渐变作为遮罩图片。我们别无选择只能使用一个渐变的png，顶部是不透明的逐渐渐变到底部是透明的。因为-webkit-mask的行为类似于小背景图片平铺盖在区域上。所以使用一个1px X 300px的图片足以。最后把嵌入的图片借助于duri.me，把图片进行64编码做为数据url，这样节省http的请求。这是我们可以放到外部样式里

-webkit-mask-image: url(data:image/png;base64,iVBORw…[shortedned a bit]…FTkSuQmCC);    

下面是javasript的修改

function head () {
  if (window.SVGForeignObjectElement) {
    document.write('\
      \
        \
          \
            \
              \
              \
            \
            \
          \
        \
        \
    ');
  } else {
    document.write('\
      \
    ');
  }
}
function foot () {
  if (window.SVGForeignObjectElement){
    document.write('\
        \
      \
    ');
  } else {
    document.write('\
      \
    ');
  }
}

 
如果如下：

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

径向渐变也是可以的。我们来做一个400px X 400px的图片遮罩

 
然后我们需要这样改变我们的svg遮罩:

 
这里alpha过滤器的style=2中的2代表径向形状

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100,FinishOpacity=0,Style=2);    

脚本转译成：

function head () {
  if (window.SVGForeignObjectElement) {
    document.write('\
      \
        \
          \
            \
              \
              \
            \
            \
          \
        \
        \
    ');
  } else {
    document.write('\
      \
    ');
  }
}
function foot () {
  if (window.SVGForeignObjectElement) {
    document.write('\
        \
      \
    ');
  } else {
    document.write('\
      \
    ');
  }
}

 
对于移动webkit我们再次创建一个径向渐变的位图。使用一个50px X 50px图片足够了。然后把它拉伸盖在400px×400px的元素上，我们需要使用-webkit-mask-size: cover.

img {
    -webkit-mask-size: cover;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0…[shortened a bit]…lFTkSuQmCC);
}

 
最终效果：

结束语

希望你可以引起你对web遮罩效果的兴趣。如果你对css设置遮罩有更深入的研究，你可以留言告诉我们。

• 上一个： css3+html5实现太阳系行星公转动画实例

• 下一个： CSS 给表单必选项添加星号的例子