opacityなどで背景のみ不透明度にしたいです

解決済

質問者：webyou
質問日時：2014/05/27 23:14
回答数：1件

閲覧ありがとうございますm(_ _)m

WEB制作に関してご質問させて頂きたいことがございます。
ヘッダー画像部分のHTML+CSSコーディングで下記のことをやりたいと考えています。

(1) ヘッダー画像の右上に角丸画像を貼る
(2) 角丸画像（ホワイト）の中にタイトルを入れたい
(3) ヘッダー画像をもとに角丸画像のみ不透明度を設定したい（タイトル文字は不透明度にしない）

ソースは下記になります。
【HTML】
<div id="header">
<div id="headertext"><h1>タイトル</h1>
<h2>- サブタイトル -</h2>
</div>
</div>

【CSS】
#header {
margin: 0;
width: 1200px;
height: 270px;
overflow: hidden;
padding: 0;
background-image: URL("ヘッダー画像")
}

div#headertext{
position: relative;
top: 20px;
left: 630px;
height: 60px;
width: 550px;
padding-right: 20px;
padding-top: 10px;
text-align: right;
background-image: URL("タイトル用ホワイト画像");

/*opacity:0.5; background-color: #FFFFFF;*/

/* -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;*/
}

h1、h2のCSSは省略いたします。
(1)と(2)に関しては出来ていますが、(3)に関してはホワイト画像とタイトル、サブタイトル共に不透明になってしまって上手くいきませんでした。

よろしければご教示お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/05/28 10:15

デザインのためにHTML書かない!!--先でデザイン変えるとき困るし、何のために「構造とプレゼンテーションの分離(

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」かわからない。

<body>
　<div class="header">
　　<h1>ページタイトル</h1>
　　<h2>サブ見出し</h2>
　　<div class="nav">
　　　　<h3>ナビゲーション</h3>
　　</div>
　</div>
とする。
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.header{min-height: 270px;
background-image: URL(./images/background/sky.jpg);
}
div.header h1{
float:right;
top: 20px;
right: 20px;
height: 60px;
width: 550px;
text-align:center;
line-height:60px;
position:relative;
z-index:10;
}
div.header h1:before{
content:url(./images/background/white550_60.gif);
position:absolute;top:0;left:0;
opacity:0.5;
z-index:-10
}
div.header h2:after{content:"";clear:both;display:block;white-space:pre}
div.header div.nav{background-color:yellow;}

・スマホや狭いディスプレイから幅広まで対応
・ユーザーがフォントサイズを変更してもよい
・border-radiusと、background-color:rgba(255,255,255,0.5)のほうが本来の方法