匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

【HTML】CSSで背景画像をグレースケール(モノクロ)にし、子ボックスで解除する方法

インデックスページでは色のついた背景画像を設定し、他のページで背景画像をモノクロにしたいのですが、画像をいちいち2つ用意するのもめんどくさい(コロコロ変える予定なので)

なので他のページをCSS「background-image」「-webkit-filter: grayscale(100%);」でモノクロにしたのですが
モノクロにした親ボックスにコンテンツ(子ボックス?)が入れ子になってるので、
コンテンツ内の画像もモノクロになってしまいます。

<親ボックス>  ←ここに背景画像とグレースケール設定

  <子ボックス>
    画像ペタペタ  ←するとここもグレースケール設定になってしまう
  </>

</>


なので、「background-image」のみにグレースケールを適応する方法
または、子ボックスの設定で「-webkit-filter: grayscale(100%);」を解除する方法を教えてください

お願いします。

※子ボックスに「-webkit-filter: grayscale(0%);」と上書きするだけでは無理でした。

回答の条件
  • 1人50回まで
  • 13歳以上
  • 登録:2015/03/16 12:47:38
  • 終了:2015/03/23 12:50:05

回答(0件)

回答はまだありません

  • 匿名回答1号
    匿名回答1号 2015/03/16 12:57:21
    -webkit-filter: none;
    http://html5-demos.appspot.com/static/css/filters/index.html
    noneで解除してみましょう
  • 匿名質問者
    匿名質問者 2015/03/16 13:23:35
    すいません、治りませんでした。。。
    子ボックスに記述すれば効果はなく(子ボックスの画像はグレースケールのまま)
    親ボックスに記述すればグレースケール自体がなくなりました(当たり前ですけど)
  • 匿名回答2号
    匿名回答2号 2015/03/16 14:31:55
    グレースケールにしたいimg要素に直接指定すればいいだけの話では?。
    なぜ親タグのブロック要素に設定しているのか意味不明なんですけれども。
  • 匿名質問者
    匿名質問者 2015/03/16 17:33:09
    僕は参考サイトからコピーするマンなのでやり方がよくわからないのですが
    詳しく教えてもらっていいですか?
  • 匿名回答2号
    匿名回答2号 2015/03/16 18:31:04
    スタイルシートのスタイル継承は便利な機能だけど、
    親要素に画像エフェクトは不要でしょ?。
    そうしたてけとーな記述は、いざ不具合が発生したときに、
    原因特定の障害になるだけなので、普通なら避けるんですよ。
    だから定義側で、

    .gs-efect {-webkit-filter: grayscale(100%);}

    のように分離して、親要素のimgタグにclass属性を付けて、

    <img ckass="gs-efect" src="http://...">

    とすればOKという事。imgはブロック要素ではないのでスタイルは継承されません。
  • 匿名質問者
    匿名質問者 2015/03/16 20:28:05
    背景画像でグレースケールにしたかったので

    <親ボックス>

      <div 背景></div>←背景表示してz-index: 1;

      <子ボックス></子>z-index: 2;にして絶対位置指定させて画像置いた

    </親>

    という風にして解決しました
    ありがとうございました
  • 匿名回答3号
    匿名回答3号 2015/03/17 15:33:35
    >>2号
    「ブロック要素」の意味が分かってない
  • 匿名回答2号
    匿名回答2号 2015/03/17 15:52:26
    3号君はスパゲッティープログラムとか構造化とかオブジェクト指向とかの意味を調べた方がいいと思うよ
  • 匿名回答3号
    匿名回答3号 2015/03/17 16:12:49
    わけの分からないことを。

    CSS プロパティの継承はプロパティによって決まってる。
    ブロック要素とかインライン要素とか関係ない。
    2号は入れ子にできるタグのことをブロック要素と思っているらしい。
    親と子だから継承という短絡思考なんだな。
  • 匿名質問者
    匿名質問者 2015/03/17 20:07:58
    >3号君はスパゲッティープログラムとか構造化とかオブジェクト指向とかの意味を調べた方がいいと思うよ

    サイトからコピーするマンの俺でも知ってる単語なんだけど……

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません