1
有没有办法实现将CSS filter: brightness()
设置为不影响特定/全部(无所谓)子元素的元素的效果?在不影响子元素的情况下设置父元素的过滤器亮度
请看下面的例子:
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>
在这里,我有一个span
一个div
(类icon
)内,我设置的div
的过滤器亮度像这样:
$('.icon').css('filter', `brightness(${bright})`);
但是,我想它t 只有影响那个背景,并不影响小“指标”span
。也就是说,在上面的代码片段中,图标应该脉动,但前景指示符及其红色/绿色背景应保持不变。我想到的唯一的东西尝试失败:
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
的子项。
顺便说一句,我实际上并不需要一个解决方案,它忽略了所有子元素。我只需要一个给定的孩子(那些span
s)不受影响,因为我正在使用的结构在每个div
下没有多个孩子;这个例子很有代表性。不知道这是否重要。
有没有办法做到这一点?
该死,我真的很希望能不用左右移动结构,因为我无法控制HTML本身,但我想操作起来很简单,我只需要验证一下它不会破坏其他CSS或JS任何选择器(这是[this](https://stackapps.com/questions/7404/top-bar-for-chat-rooms))。我会持续一段时间,然后再接受这个看看是否有其他技巧出现。顺便说一句,可能无关紧要,但这是'filter'而不是'opacity'。 –
我对CSS做了一些更改,但没有对JS进行更改。将它切换到不透明可能是一个好主意,因为如果Internet Explorer除了新的Microsoft Edge之外,它不受任何版本的支持。 – WizardCoder