简单的问题
:我得到了这个clip-path mask
与Chrome
工作,并想知道一个简单的方法来获得与Firefox
相同的效果。
我做了一些研究,看到Firefox's
clip-path
与svg
一起工作,但这是唯一的方法吗?如何动态地改变mask
在这种情况下?
<div id="image1" class="frame">
<div class="layer"></div>
<div class="layer"></div>
</div>
<input id="range1" type="range" value=0 max=100 oninput="UpdateImage('image1');"></input>
Javascript: function UpdateImage(id) {
image_elem = document.getElementById(id);
layers = image_elem.getElementsByClassName("layer");
range = document.getElementById("range1");
layers[1].setAttribute("style", "-webkit-clip-path:inset(" + range.value + "% 0 0 0)");
}
如果您关心的是浏览器支持,我建议使用不同的方法来获得相同的输出:使用高度而不是clip-path
。
这将提供浏览器支持(至少)chrome, Firefox, IE, safari, opera…:
function UpdateImage(id) {
image_elem = document.getElementById(id);
layers = image_elem.getElementsByClassName("layer");
range = 100 - document.getElementById("range1").value;
layers[1].setAttribute("style", "height:" + range + "%");
}
.frame {
position:relative;
width: 375px;
height: 250px;
}
.frame .layer {
position:absolute;
bottom:0;
width: inherit;
height: inherit;
background-size: 100% auto;
background-position: left bottom;
}
#image1 .layer:nth-child(1) {
background-image:url("http://rlc.site90.net/images/img1_layer0.jpg");
}
#image1 .layer:nth-child(2) {
background-image:url("http://rlc.site90.net/images/img1_layer1.jpg");
}
#range1 {
width:375px;
}
<div id="image1" class="frame">
<div class="layer"></div>
<div class="layer"></div>
</div>
<input id="range1" type="range" value=0 max=100 oninput="UpdateImage('image1');"/>