0

如何为子元素设置 html5 网页过滤器？在我的情况下，我希望看到亮度为 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/

4

2 回答 2

1

One approach is to contain both divs in a wrapper, and make them siblings:

jsFiddle (will need more layout but should give you an idea)

More informaation: 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;
}
于 2013-08-14T17:53:57.040 回答
1

您必须将效果添加到 img 本身：

http://jsfiddle.net/sMCfP/2/

div.snippet img {
   -webkit-filter: brightness(1.7) !important;
}
于 2013-08-14T17:38:23.693 回答