1

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 では正常に動作しません。そのブラウザーで動作させるにはどうすればよいですか?

4

1 に答える 1

3

デモ - 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-03T11:42:54.333 に答える