您好,我想在我的 body 标签的一部分中使用白色透明背景,但我已经尝试了一些 CSS,但它仍然无法正常工作。它甚至没有填充白色背景。
这是我的 HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Guitar Corner</title>
<link href="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css"></script>
<script src="C:/Users/Jhan Jericho/Desktop/bootstrap/jquery-1.7.1.intellisense.js"></script>
<script src="C:/Users/Jhan Jericho/Desktop/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<img src="bg2.jpg" alt="logo"/>
</div>
<div class="center-block">
<div class="col-md-12" style="background-image:url('guitar.png'); background-size: 1200px 350px; background-repeat:no-repeat; shadow: 10px 0px 20px;">
<br>
<br>
<br>
<br>
<br>
<br>
<div class="col-lg-3">
<img src="GC.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222);"/>
</div>
<div class=".col-xs-12 .col-md-8"><i>
<font face="Bebas Neue" color="white" size="150"><br />
"We are attached by strings."
</i>
</font>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
<div id="bodycolor">
<div class="col-md-12" id="bartonav"><font color="white">
<h1>HOME</h1>
</div>
<div class="bodycolor">
<div class="col-md-3">
<br />
<ul class="nav nav-pills nav-stacked">
<li><a href="#">HOME</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我的 CSS:
.bodycolor
{
background-color: white;
}
我在这里编辑并包含了我的全部代码。
最佳答案
要制作半透明背景,请使用 rgba(将 alpha 值添加到背景颜色)
#idName
{
background-color:rgba(255,255,255,0.5);
}
最后的 0.5 是 alpha channel ,0 是透明的,1 是不透明的。
这是一个显示透明度的 JSFiddle:JSFiddle
关于html - 透明白色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24505439/