背景の表示の優先順位を上げるにはどうすれば良いでしょうか？真ん中が窓みたいに透明に切り抜かれている背景画像があったとします。そこにメインのコンテンツを透明な窓からだけ表示されるようにしたいのですが、何か良い方法はありませんか？背景のz-indexを上げるなど・・・？
是非お知恵を貸してください！
メインのコンテンツは画像？画像なら、こんな感じでできるんじゃないかな↓body {background: 背景1, 背景2;}参考：ttps://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_multiple_backgroundsコンテンツが文書なら、コンテンツを窓サイズのdivかなんかで囲んでpositionで配置させるとか？期待結果がちょっとわからないからこれくらいしか言えないけど。
ご回答ありがとうございます。説明不足でした、申し訳ありません。窓から表示させたいコンテンツはdivになります。やはり窓つき背景をdivにして、両方をz-indexで重ねるしかないのでしょうか・・
↓のサイトを見ると、ヘッダをposition:fixed、z-indexさせてるね。背景固定にしていいなら同じようにするのが楽かなと思うけど、もし背景もある程度の位置までは固定で、あるラインを超えたらスクロールさせたいなら、パララックスとかで調べた方が理想に近い気がする。
度々ご回答いただき恐縮です。なるほど、z-indexで固定ですね。私の場合は固定にしても問題ありませんので、同じ手法でやってみたいと思います。ご相談に乗っていただきありがとうございました。
背景をrelativeにして高さ保ったまま、absoluteの窓枠で重ねるとか。background複数指定でもできそうだけど、IE8とかだと動かないんじゃないかな。
ご回答ありがとうございます。イケサイで見つけたのですが、このサイトが近いかもしれません。www.furisodeshop.com/
切り抜かれた画像の下にスライド画像がのぞいている感じです。わかりづらくてすみません。
みんなの回答 2 件
メインのコンテンツは画像？
画像なら、こんな感じでできるんじゃないかな↓
body {background: 背景1, 背景2;}
参考：ttps://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_multiple_backgrounds
コンテンツが文書なら、コンテンツを窓サイズのdivかなんかで囲んでpositionで配置させるとか？
期待結果がちょっとわからないからこれくらいしか言えないけど。
背景をrelativeにして高さ保ったまま、absoluteの窓枠で重ねるとか。
background複数指定でもできそうだけど、IE8とかだと動かないんじゃないかな。
関連するトピックス