如何为子元素设置html5 Web过滤器?
在我的情况下,我希望看到子元素的图像的亮度为1(以便在不应用滤镜的情况下使图像处于原始状态)
这是一个样本
http://jsfiddle.net/sMCfP/1/
div.scena
{
width:400px;
height:400px;
background:url(http://www.w3schools.com/css/klematis2.jpg) repeat;
border:1px solid black;
-webkit-filter: brightness(0.3);
}
div.snippet
{
border:2px solid black;
width:200px;
height:200px;
border:1px solid black;
opacity:1
-webkit-filter: brightness(1.7) !important;
}
<div class="scena">
<p>this is scena</p>
<div class="snippet">
<img src="http://www.w3schools.com/css/klematis2.jpg" alt="Smiley face" height="142" width="142">
</div>
</div>
知道怎么做吗?
您知道使用css3的不同方法的任何类似解决方案吗?我仅针对webkit。
建议的解决方案,略有修改:
http://jsfiddle.net/sMCfP/7/
最佳答案
一种方法是将两个div都包含在包装中,并使它们成为同级:
jsFiddle(将需要更多布局,但应给您一个想法)
更多信息:CSS Opacity That Doesn’t Affect Child Elements
的HTML
<div class="wrapper">
<div class="scena">
<p>this is scena</p>
</div>
<div class="snippet">
<img src="http://www.w3schools.com/css/klematis2.jpg" alt="Smiley face" height="142" width="142">
</div>
</div>
的CSS
div.wrapper {
width:400px;
height:400px;
}
div.scena {
position: absolute;
top: 0;
left: 0;
width:400px;
height:400px;
background:url(http://www.w3schools.com/css/klematis2.jpg) repeat;
border:1px solid black;
-webkit-filter: brightness(0.3);
}
div.snippet {
position: absolute;
top: 0;
left: 0;
border:2px solid black;
width:200px;
height:200px;
border:1px solid black;
opacity:1;
-webkit-filter: brightness(1.7) !important;
}
关于html - 如何为子元素设置html5网络过滤器?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18238442/