- 締切済み
背景色と画像を同時にのせる
背景画像を壁紙にし、その画像の上に文字を書きたいのですが、 画像と文字が入り混じって文字が見にくくなってしまいます。 そこで、画像は左右の端だけ残して（左右端合計で画像の幅が画面の40%くらいになるように）、 真ん中の60%くらいに、画像を張る前の白い状態にしたいと思うのですが、HTMLのタグがわかりませんorz タグを教えてほしいです。 よろしくお願いします。 ---------------------------- (画像左端{20%}) (何もない白い背景{60%}) (画像右端{20%}) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) ↑こんな感じです
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと時間が取れたので ＞タグを教えてほしいです。 タグではないです。スタイルシートです。下記に簡単なサンプル上げています。 DOCTYPEは、HTML4.01 Strict(厳密型)で作成してあります。 ★お約束で、下記サイトで適合性はテストしてあります。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 【注意】サンプルは、視認性を浴するため、タブ(\t)を全角スペースに置き換えてあります。表示するときは全角スペース二文字をタブに置換すること。 本体<body>内は、質問文をそのままマークアップしただけです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" href="mailto:hoge@hoge.com"> <style type="text/css"> <!-- body{ background: black url(../Photo/12.jpg) fixed;} /*画像のURLは適当に書き換える。配置は固定fixed*/ body>h1,body>h2,body>p,body>pre,body>div{ background-color:white; margin: 0px 20% 0px 20%; padding: 0.5em; line-height:1.6em; } pre{ border:blue solid 1px;margin:1em;} body>p{ text-indent:1em; padding-bottom:0.2em; padding-top:0.2em; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <h2>スタイルシートなし</h2> <p>背景画像を壁紙にし、その画像の上に文字を書きたいのですが、画像と文字が入り混じって文字が見にくくなってしまいます。</p> <p>そこで、画像は左右の端だけ残して（左右端合計で画像の幅が画面の40%くらいになるように）、真ん中の60%くらいに、画像を張る前の白い状態にしたいと思うのですが、HTMLのタグがわかりませんorz</p> <p>タグを教えてほしいです。</p> <p>よろしくお願いします。</p> <div> <pre>(画像左端{20%}) (何もない白い背景{60%}) (画像右端{20%}) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端)</pre> </div> <p>↑こんな感じです</p> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に画像を背景にして、<div>でくくった本文をしろ背景にすればよいのでは、文字他家白背景にするなら、段落要素にbackground-clorをすればよい。
- torayoshi
- ベストアンサー率62% (910/1449)
まずhtmlで白マスクはかけられません。 CSSでならフィルターかけられますが、中央のみはありません。 しかもIE限定なのでどっちみちCSSフィルターは使用出来ませんね。 なので、画像単体で加工する事ほかありません。 例えば中央のみブレンド掛けるとか。 GIMPでの一例↓ http://www16.plala.or.jp/zaq_501/sample.jpg これぐらいなら文字も読めると思います。 透明度も調整出来ます。
