グレースケール（100％）コンテナ内のカラー画像

Question

私は背景画像を持つdivを持っています。白黒で表示するフィルタを使用しています（filter: grayscale(100%);）。私は今、そのdivの中に色のアイコンを配置しようとしています。アイコンをgrayscale(0%)に設定しようとしましたが、これは機能していません。

#a1, #a2 { 
 
    background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
#a1 { 
 
    height: 250px; 
 
    width: 250px; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    position: relative; 
 
} 
 
#a2 { 
 
    height: 50px; 
 
    width: 50px; 
 
    -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div id="a1"><!-- << this should be black and white --> 
 
    <div id="a2"><!-- << this should be color --> 
 
    </div> 
 
</div>

背景画像を保持するために、追加のdivを作成せずにこれを行う方法があります：ここで

は一例ですか？実際のコードははるかに複雑なので、可能であれば余分なdivを避けたいのです。

Answer 1

もちろんはい、あなたは::beforeと::after擬似要素を使用する必要があります。

#a1 { 
 
    height: 250px; 
 
    width: 250px; 
 
    position: relative; 
 
} 
 
#a1:after, #a1:before { 
 
    content: ''; 
 
    background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    position: absolute; 
 
} 
 
#a1:before { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#a1:after { 
 
    height: 50px; 
 
    width: 50px; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div id="a1"></div>

DEMO on JSFiddle

Answer 2

それはfilter: grayscale(100%)と容器内の色を持ってすることはできません。

はスペック（強調鉱山）でthe filter propertyを見る

CSS opacityがないこと stacking context同様の作成にnone結果以外の計算値。すべて 子孫の要素はグループで のフィルタ効果が全体としてに適用されます。

はい、フィルタなしのコンテンツとフィルタの内容を分離する必要があります。

これは、Hiszpanが擬似要素を使用することを提案しているため、必ずしもあなたのHTMLに追加のラッパーが必要なわけではありません。