ヘッダーと div とフォーム ボタンに個別の不透明度を追加したいと考えています。div の不透明度を 0.5 にしたい。これは問題ありませんが、フォームボタンを不透明にしたくありません。不透明度のレベルを変更しようとすると、ヘッダーとフォーム ボタンの不透明度が同じになります。例: ヘッダーの不透明度を 0.9 に、div の不透明度を 0.5 に、送信ボタンに不透明度を設定したくない場合、HTML コードは次のとおりです。
<!DOCtype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adeventist Youth's Empowerment</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<p> </p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
</body>
</html>
私のcssはこれです：
body {
background-image:url(Images/background%20image1.jpg);
background-repeat:no-repeat;
background-size:100%;
background-position:center top;
}
#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}
#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;
}
#apDiv1 {
background:#FFF;
opacity: 0.5;
border-radius: 20px;
}
#form {
width: 20em; margin: auto;
}
.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;
}
.button:hover{
color: #000;
background-color: #0C0;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 1;
}
* {
margin: 0;
padding: 0;
}
divに不透明度を追加すると、フォームは自動的にその不透明度を持ち、ヘッダーもそうします。