我刚开始编写代码，我决定制作一个学校元素网站，但我无法在不影响文本的情况下使框透明。这是我的代码的链接:
我希望你们能帮助我:)
我试过了 CSS .boxed {背景:透明;}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Bjerg</h1>
<div id="wrapper">
<div id="nav">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Small Chair</a></li>
<li><a href="">Shiny Shelf</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
</div>
</body>
还有我的CSS:
h1{
text-align:center;
}
Body {
text-align: ;
background: url("http://goo.gl/wkzbXp");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
#wrapper
{
width: 1024px;
height: auto;
margin: auto;
}
#menu
{
margin:auto;
width:400px;
height: 100px;
}
#content
{
margin:auto;
width: 760px;
height: auto;
}
.container {
overflow:hidden;
list-style:none;
}
.container li {
float:left;
text-align:center;
margin:20px;
}
.container img {
border:2px solid #000;
display:block;
}
.sortfarve {
color:#000;
}
.hvidfarve {
color:#fff;
}
最佳答案
你可以使用 rgba() ，最后一个参数可以用来定义不透明度
.boxed {
background: rgba(123,0,0,0.5);
/*........................^......opacity......_*/
}
关于html - 如何在不影响文本的情况下制作透明框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21240387/