CSS：-webkit-mask-image [英] CSS: -webkit-mask-image

问题描述

我正在使用CSS属性

  -webkit-mask-image 
  

在图像上应用遮罩。但是，在Chrome中，当您将图片从页面上滚动时，面具会移动。

如何防止面具移动？或者是一个渲染工件？

JSFiddle：

示例： http://search.missouristate.edu/map/mobile/examples/corners.htm

I'm using the CSS property

-webkit-mask-image

To apply a mask over an image. However, in chrome, the mask moves as you scroll the image off the page.

How do you prevent the mask from moving? Or is it a rendering artifact?

JSFiddle: http://jsfiddle.net/DZTvR/ (Scroll down on the frame with the map in it).

解决方案

You'll have to resize the .png but this seems to work for me:

-webkit-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-o-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-moz-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);

http://jsfiddle.net/DZTvR/13/

This should also degrade gracefully for IE <= 8.

Edit:

This is a better answer: http://stackoverflow.com/a/4579617/1477388

Example: http://search.missouristate.edu/map/mobile/examples/corners.htm

这篇关于CSS：-webkit-mask-image的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！