在不影响 child 元素的情况下设置 parent 的过滤器亮度

Question

有没有办法实现在元素上设置 CSS filter: brightness() 的效果而不影响特定/所有（无关紧要）child 元素？

考虑以下示例：

function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', `brightness(${1.0/bright})`);
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
  setBrightness(bright);
}, 50);

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: table-cell;
  text-align: center;
  /* normally middle but set to top to not obscure background for this example: */
  vertical-align: top; 
}

.icon1 {
  background-position: -141px -54px;
}

.icon2 {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  display: inline-block;
  font-family: sans-serif;
  font-size: 8pt;
  width: 50%;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="bar">
    <div class="icon icon1">
    <span class="indicator">3</span>
    </div>
    <div class="icon icon2">
      <span class="indicator">10</span>
    </div>
  </div>
</body>

在这里，我在 div (class icon) 中有一个 span，我正在 [=19= 上设置滤镜亮度] 是这样的：

$('.icon').css('filter', `brightness(${bright})`);

不过，我希望它只影响那个背景，而不影响"indicator"span。也就是说，在上面的代码片段中，图标应该是脉动的，但前景指示器及其 red/green 背景应该保持不变。我唯一想尝试的事情失败了：

function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', `brightness(${1.0/bright})`);
}

此外，重要的是我不会更改以下内容：

无法更改 background-* CSS 属性。
无法更改 HTML 的结构，span 必须保留 div 的 child。

顺便说一下，我实际上不需要省略 all child 元素的解决方案。我只需要一个给定的 child（那些 spans）不受影响，因为我正在使用的结构在每个 div 下没有多个 children；这个例子很有代表性。不确定这是否重要。

有办法吗？

Answer 1

更改父元素的不透明度将始终更改子元素的不透明度。遗憾的是，没有办法解决这个问题。但是，您可以更改 HTML 结构并将元素绝对定位在彼此之上，然后仅定位要淡入淡出的元素。

$(document).ready(function(){
  function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
    setBrightness(bright);
  }, 50);
});

#bar {
  background: #222;
  font-size: 0;
 }

 .icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: inline-block;
  position: absolute;
  top:0;
  left: 0;
 }

 .icon-wrap {
  width: 36px;
  height: 34px;
  text-align: center;
  position: relative;
  display: table-cell;
  /* normally middle but set to top to not obscure background for this example: */
 }

 .icon1 .icon {
  background-position: -141px -54px;
 }

 .icon2 .icon {
  background-position: -220px -54px;
 }

 .indicator {
  border-radius: 2px;
  color: white;
  font-family: sans-serif;
  font-size: 8pt;
  width: 18px;
  height: 14px;
  position: absolute;
  top:0;
  left:50%;
  margin-left: -9px;
 }

 .icon1 .indicator {
  background: #a00;
 }

 .icon2 .indicator {
  background: #0f0;
 }

<div id="bar">
  <div class="icon1 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">3</span>
  </div>
  <div class="icon2 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">10</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

也可以使用 CSS3 个关键帧：

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: inline-block;
  position: absolute;
  top:0;
  left: 0;
  -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
  filter: grayscale(200%);
}

.icon-wrap {
  width: 36px;
  height: 34px;
  text-align: center;
  position: relative;
  display: table-cell;
  /* normally middle but set to top to not obscure background for this example: */
}

.icon1 .icon {
  background-position: -141px -54px;
}

.icon2 .icon {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  font-family: sans-serif;
  font-size: 8pt;
  width: 18px;
  height: 14px;
  position: absolute;
  top:0;
  left:50%;
  margin-left: -9px;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

@keyframes fader {
  0%   {
    -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
    filter: grayscale(200%);
  }
  50%  {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
  }
  100% { opacity:1;
    -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
    filter: grayscale(200%);
  }
}
@-o-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
@-moz-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
@-webkit-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
.icon {
   -webkit-animation: fader 3s infinite ease-in;
   -moz-animation: fader 3s infinite ease-in;
   -o-animation: fader 3s infinite ease-in;
   animation: fader 3s infinite ease-in;
}

<div id="bar">
  <div class="icon1 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">3</span>
  </div>
  <div class="icon2 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">10</span>
  </div>
</div>

在不影响 child 元素的情况下设置 parent 的过滤器亮度

Setting filter brightness of parent without affecting child element

javascript

css

css-filters