css box 背景画像透過表示させる

質問

cssboxで枠を作っています。メインボックスにbodyで指定した背景を透過して入れたいと思っています。こんなcssを使ってみましたが背景どころか全て薄くなってしまいました。

filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;

回答No.2

dscripty · ベストアンサー

質問の文章だと伝わらないかも。。。

body 要素の背景の画像があって、
前面のコンテンツのための div 要素とか section(HTML5) 要素とかに、background-color: を指定してあるんだけど、背景の画像も薄く表示させたいから、コンテンツのための要素に

filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;

とかを設定したら、
文字まで、透過しちゃったんだけど、
どうすればいいの？

って書くと伝わりそうなきがするよ？

がんばって勉強して、有能な社会人になろう！

お礼

説明が下手ですみません。結構悩んだのですがなかなか解決できないのでココに投稿しました。

回答No.1

ORUKA1951

「背景を透過して」と「背景どころか」が結びつかないのですが？
背景は、文字通り背景でもっとも下にあるものなので、透過させるということはその上にある要素を透過して下の背景が透けて見えることを意味しています。すなわち、その上にある要素は薄くなるということですから、期待した動作だと思うのですが？

　もし、画像を透過した状態で上にかぶせるなら、opacityプロパティで、(背景ではなく)前面に画像要素を透過させておくことになります。その場合、
・下にある要素に含まれる文字列が選択できない
・　　〃　　　　　　　　リンクが無効
・opacityを理解しないブラウザでは下の要素が見えない
　などの問題が発生します。

　なお、cssboxの意味が不明ですが、そもそもHTMLはデザインとは無関係--分離すべきです。HTMLは文書構造だけを記述し、スタイルシートでそれをデザインしていきます。

お礼

回答有難うございます。