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>を、私はdiv（クラスicon）内部spanを持っていると私はdiv年代にフィルタの明るさを設定していますように：
$('.icon').css('filter', `brightness(${bright})`);
ただし、 o はその背景に影響し、小さな「インジケータ」には影響しませんspan。つまり、上記のスニペットでは、アイコンが脈打っているはずですが、フォアグラウンドインジケータとその赤/緑の背景は変更されません。私は失敗しようとすると考えるだけのもの：
- が
background-*CSSプロパティを変更することはできません：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})`); }はまた、それは私ないは、次のように変更を加えることが重要です。
- HTMLの構造を変更することはできません。
spanはdivの子のままでなければなりません。
実際には、すべて子要素を省略したソリューションは必要ありません。私は働いている構造がそれぞれの下に複数の子供を持っていないので、ただ1つの指定された子（それらのspans）は影響を受けません。div;この例は代表的なものです。それが重要かどうかはわかりません。
これを行う方法はありますか？
ダーン、私は本当に以来、周辺の構造を移動する必要がないように期待していました私はHTML自体のコントロールがありませんが、操作するのは簡単だと思いますそれは他のCSSやJSのセレクタを破ることはありません（これは[this]（https://stackapps.com/questions/7404/top-bar-for-chat-rooms）のためです）。私はこれを受け入れる前にしばらく外に出て、他のトリックが現れるかどうか確認します。 Btwは問題ではないかもしれませんが、これは '不透明度'ではなく 'フィルタ'です。 –
私はCSSにいくつか変更を加えましたが、JSには変更を加えませんでした。Internet Explorerの場合は、新しいMicrosoft Edge以外のバージョンではサポートされていないため、不透明に切り替えることをお勧めします。 – WizardCoder