Question

我想为我的标题和我的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>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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添加不透明度时，表单自动具有不透明度，标题也是如此。

Answer 1

从您的代码中，您错过了结束标记

要回答你的问题，你可以在你的div中使用这样的东西

#apDiv1 {
background: rgba(255,255,255,0.5);
border-radius: 20px;
}

其中rgb是rgb格式的颜色，a是alpha

Answer 2

首先，你不应该将你的div和类命名为相同。它只会导致混乱。如果您正确格式化了代码。很容易看出oyu永远不会关闭你的apDiv1。您打开另一个具有相同类名的人。正如我上面提到的，这只会让你感到困惑。在适当的地方关闭你的外部div然后它将获得它的不透明度。

<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>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>
            <input type="submit" value="Escape The World" class="button">
        </p>
    </form>
CLOSE THE DIV HERE OR EARLIER IF YOU WANT

在你解决了所有问题之后......以这种方式给你的外部div一个不透明......

background: rgba(64, 64, 64, 0.5)

Answer 3

在这里，我在header，form和apDiv1类中添加了三个不透明度。 jsfiddle

.apDiv1{
    opacity: 0.2;
}

#form {
width: 20em; margin: auto;
opacity: 0.8;
}

header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.7;
}

如何仅向某些div添加不透明度

3 个答案: