インデックスページでは色のついた背景画像を設定し、他のページで背景画像をモノクロにしたいのですが、画像をいちいち2つ用意するのもめんどくさい（コロコロ変える予定なので）
なので他のページをCSS「background-image」「-webkit-filter: grayscale(100%);」でモノクロにしたのですが
モノクロにした親ボックスにコンテンツ（子ボックス？）が入れ子になってるので、
コンテンツ内の画像もモノクロになってしまいます。
＜親ボックス＞ ←ここに背景画像とグレースケール設定
＜子ボックス＞
画像ペタペタ ←するとここもグレースケール設定になってしまう
＜/＞
＜/＞
なので、「background-image」のみにグレースケールを適応する方法
または、子ボックスの設定で「-webkit-filter: grayscale(100%);」を解除する方法を教えてください
お願いします。
※子ボックスに「-webkit-filter: grayscale(0%);」と上書きするだけでは無理でした。
1
1
1
コメント（10件)
http://html5-demos.appspot.com/static/css/filters/index.html
noneで解除してみましょう
子ボックスに記述すれば効果はなく（子ボックスの画像はグレースケールのまま）
親ボックスに記述すればグレースケール自体がなくなりました（当たり前ですけど）
なぜ親タグのブロック要素に設定しているのか意味不明なんですけれども。
詳しく教えてもらっていいですか？
親要素に画像エフェクトは不要でしょ？。
そうしたてけとーな記述は、いざ不具合が発生したときに、
原因特定の障害になるだけなので、普通なら避けるんですよ。
だから定義側で、
.gs-efect {-webkit-filter: grayscale(100%);}
のように分離して、親要素のimgタグにclass属性を付けて、
<img ckass="gs-efect" src="http://...">
とすればOKという事。imgはブロック要素ではないのでスタイルは継承されません。
＜親ボックス＞
＜div 背景＞＜/div＞←背景表示してz-index: 1;
＜子ボックス＞＜/子＞z-index: 2;にして絶対位置指定させて画像置いた
＜/親＞
という風にして解決しました
ありがとうございました
「ブロック要素」の意味が分かってない
CSS プロパティの継承はプロパティによって決まってる。
ブロック要素とかインライン要素とか関係ない。
2号は入れ子にできるタグのことをブロック要素と思っているらしい。
親と子だから継承という短絡思考なんだな。
サイトからコピーするマンの俺でも知ってる単語なんだけど……