1

我想为我的标题、我的 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 添加不透明度时，表单会自动具有该不透明度，标题也是如此。

4

3 回答 3

0

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

要回答您的问题，您可以在 div 中使用类似的内容

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

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

于 2013-11-04T20:34:05.860 回答
0

首先，您不应该将您的 div id 和类命名为相同的名称。它只会导致混乱。如果您正确格式化代码。很容易看出 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)
于 2013-11-04T20:39:41.777 回答
0

给你，我在 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;
}
于 2013-11-04T20:46:04.257 回答