【HTML】CSSで背景画像をグレースケール（モノクロ）にし、子ボックスで解除する方法
インデックスページでは色のついた背景画像を設定し、他のページで背景画像をモノクロにしたいのですが、画像をいちいち2つ用意するのもめんどくさい（コロコロ変える予定なので）
なので他のページをCSS「background-image」「-webkit-filter: grayscale(100%);」でモノクロにしたのですが
モノクロにした親ボックスにコンテンツ（子ボックス？）が入れ子になってるので、
コンテンツ内の画像もモノクロになってしまいます。
＜親ボックス＞ ←ここに背景画像とグレースケール設定
＜子ボックス＞
画像ペタペタ ←するとここもグレースケール設定になってしまう
＜/＞
＜/＞
なので、「background-image」のみにグレースケールを適応する方法
または、子ボックスの設定で「-webkit-filter: grayscale(100%);」を解除する方法を教えてください
お願いします。
※子ボックスに「-webkit-filter: grayscale(0%);」と上書きするだけでは無理でした。
ログインして回答する
この質問へのコメント
質問の情報
- 登録日時
- 2015-03-16 12:47:38
- 終了日時
- 2015-03-23 12:50:05
- 回答条件
- 1人50回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
同じような体験をしたことがある人はいますか？。 ある日、お葬式の職業に就きたいなあなんて話題にしてい…
匿名質問者
1
-
１９８４年から１９９０年ぐらいの間に、多分コミックボンボンに掲載されていた漫画を教えてください。 主…匿名質問者
2
-
https://hikky-mura.org/t/topic/2523/7 でsma200さんという方に戸塚ヨットスクールを勧められましたが、僕…
hayakushinene
1
-
いつも大変お世話になっています。 アスペルガー精神3級独身会社員34歳男です。 最近心身共に疲れがもの凄…hayakushinene1
-
私の彼氏は毒親育ちで、うつ病を患い、家を追い出された後ホームレスになって、現在は何故か逮捕されて留置…匿名質問者1
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号は入れ子にできるタグのことをブロック要素と思っているらしい。
親と子だから継承という短絡思考なんだな。
サイトからコピーするマンの俺でも知ってる単語なんだけど……