Question

我刚刚启动了代码并且我决定制作一个学校项目网站，但我不能在不影响文本的情况下使框透明。这是我的代码的链接：

我希望你们能帮助我:)。

我试过了 CSS .boxed {background：transparent;}

<!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;
}

Answer 1

您可以使用rgba()，最后一个参数可用于定义不透明度

.boxed {
      background: rgba(123,0,0,0.5);
      /*........................^......opacity......_*/
 }

Fiddle Demo

如何在不影响文本的情况下制作透明盒子？

1 个答案: