Question

我有这个代码，它使背景图像出现在css掩码下。

.test-splash {
 height: 1000px;
width: 1000px;
display: block;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(11%, -12%);
-webkit-mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
-webkit-mask-image: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-image: url(http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg);
background-position: 0 0;
background-position-x: center;
background-repeat: no-repeat;
z-index: 28;
}

和html

<div class="test-splash"></div>

这是一个jsbin，显示了我想要实现的目标

http://jsbin.com/lunoxo/1/edit?html,css,output

它在webkit和mozilla浏览器中运行良好，但不是IE 10.我需要做些什么才能使它在浏览器中运行？

Answer 1

演示 - http://jsfiddle.net/2wtbrsdq/

尝试使用svg

＆＃13;

<svg width="360" height="233" version="1.2">
  <defs>
    <mask id="svgmask2">
      <image width="100%" height="100%" xlink:href="http://s12.postimg.org/pzhdxcxb1/squirrel.png" />
    </mask>
  </defs>
  <image mask="url(#svgmask2)" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" />
</svg>

＆＃13;

在IE10中屏蔽css

1 个答案: