在IE10中的css掩码

我有这样的代码，使背景图像出现在CSS掩码下。在IE10中的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.什么我必须要做的是让它在浏览器中工作吗？

来源

2014-12-03 Newcoma

CSS遮蔽不支持IE：http://caniuse.com/#search=mask – SW4 2014-12-03 09:42:56

却怎么也我得到相同的效果？它似乎在这里工作http://thenittygritty.co/css-masking – Newcoma 2014-12-03 09:44:49

创建一个小提琴或片段，以便我们可以在它上面工作 – 2014-12-03 10:04:14

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

尝试使用svg

<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>

来源

2014-12-03 11:42:54

虽然这不是一个CSS背景图像。 – 2014-12-03 13:22:10

'svg'被标记为@RobertLongson – 2014-12-03 13:25:24

在IE10中的css掩码

回答

相关问题