- ベストアンサー
htmlとcssを使って、現在webサイト制作の勉強を行っています。
htmlとcssを使って、現在webサイト制作の勉強を行っています。 現在、<body>にスタイルシートから背景画像を固定で表示させ、 その上に画面中央に配置する形でwebサイトを表示させています。 そのサイトの両脇だけを少し濃いめの色で表示させたいのですが、どうしたらいいでしょうか？ できたら、一番後ろにある背景も透かして見せたいのです。 どうか知恵をお貸しください。 宜しくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザの脇側が濃くなるのではなく、 おそらく、中央配置したコンテンツの両脇に影を付けたいのでは？ ----------------------- 幅1200px程度×高さ適当で、 コンテンツの影が出来るようにその部分だけをグラデーションを掛けて濃くした画像を用意する。 body{ background: url(その画像) center top; margin: 0; padding: 0;} #wrap{ background: white; margin: 0 auto; width: 幅px;} もしくは、body直下にもう１つのdivボックスで全体を囲い、 全体より影の分の幅を増やす。 その背景に影画像を配置する。 （.pngならbodyの背景が透けて見えるようになるけど、IE6未対応） 背景色となんとなく合わせながら透過グラデーションで馴染ませるのが良いかと。 <body> <div id="wrap"> <!-- 例：840pxの影の為のボックス --> <div id="wrap2"> <!-- 例：800pxのコンテンツボックス --> body{ background: url(背景画像); margin: 0; padding: 0;} #wrap{ background: url(影画像) center top; margin: 0 auto; width: 840px;} #wrap2{ background: white; margin: 0 auto; width: 800px;} ----------------------- 以上、DTD、標準モードで。 IEやCSS3でシャドウを付ける方法もあるけど。
その他の回答 (1)
- metametamu
- ベストアンサー率51% (153/295)
＞そのサイトの両脇だけを少し濃いめの色で表示させたいのですが、どうしたらいいでしょうか？ borderじゃダメなんでしょうか？ ＞一番後ろにある背景も透かして見せたいのです。 透かせたい場所をもともと薄くした画像を用意しておくのはどうですか？
お礼
ご回答ありがとうございます。 ＞borderじゃダメなんでしょうか？ webサイトとブラウザの余白全体を少し暗い背景にしたいのです。 ＞透かせたい場所をもともと薄くした画像を用意しておくのはどうですか？ それでは、薄い場所と濃い場所と、背景が全く別に見えてしまうような気がするのです。
お礼
ご回答ありがとうございます。 申し訳ないのですが、影を表示させたいわけではないのです。 webサイトを中央配置にすると、両サイドが開いているブラウザの横幅分余白ができると思います。 その余白部分を少し暗い色合いにしたいのです。 最背面 ちょっとしたイラストが入った背景画像 1つ手前 (1)中央配置にしたwebサイト（背景の設定はしないので、最背面のイラストが直接見える） (2)両脇に透過設定にした画像を表示（透過なので、最背面のイラストがうっすら見える） イメージとしてはこんな感じです。 さらに、ブラウザの横幅を広げた時に中央配置にしたwebサイトはなりゆきにまかせて移動するので、 それに合わせて両サイドの透過背景も必要な分だけ広げたいのです。 こんなのは実装するのは無理でしょうか？