Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
自己紹介のwebページを作っています。
発生している問題・エラーメッセージ
ヘッダーに「opacity:0.5;]を適用すると文字まで透明になってしまいます。 背景の色のみを透明にするにはどうすればいいですか？
該当のソースコード
HTML
<!DOCTYPE html> <html> <head> <title>自己紹介</title> <meta charset="utf-8"> <link rel="stylesheet" href="top.css"> </head></html><body> <header> <h3>My profile</h3> </header> <a href="top.html" class="btn top">Top Page</a> <a href="hobby.html" class="btn hobby">Hobby</a> <a href="village.html" class="btn hometown">Home Town</a> <footer> </footer> </body>
ーーーーーーーーーーーーーーーーーーーーーーー
CSS
header{
height:150px;
background-color:#4169e1;
opacity: 0.5;
}
body{
background-image: url(body.jpg);
}
header h3{
color:white;
font-size:60px;
margin:20px;
padding-top:30px;
padding-left:40px;
}
.btn {
float:left;
display: block;
font-size:30px;
margin:10px 40px;
display:block;
background-color:#4169e1;
border-radius:6px;
}
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
という以前に、こちらはご理解ください。 https://teratail.com/help/avoid-asking >学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。 https://teratail.com/help/question-tips#questionTips1-1 >課題や仕事を無償でやってもらえる場ではありません。 あなたがそのようなつもりで質問しているのだと他のユーザーから誤解されないように、丁寧な質問を心がけましょう。
回答2件
0
ベストアンサー
opacityではなくrgbaを使用されてはいかがでしょうか?
CSS
1header{ 2height:150px; 3background: rgba(65,105,225,0.5); 4}
投稿2018/07/10 05:34
総合スコア2409
0
rgba を使う
投稿2018/07/10 05:31
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
