如何在不影響文字的情況下製作透明盒子？

我剛開始使用代碼，我決定製作一個學校項目網站，但是我不能在不影響文本的情況下使它變成透明的。這裏是一個鏈接，我的代碼：我希望你們能幫助我:)如何在不影響文字的情況下製作透明盒子？

我試圖的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; 
}

來源

2014-01-20 user3216013

這個問題是重複http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text –

爲什麼不使用'opacity'css屬性。檢查[this]（http://www.w3schools.com/css/css_image_transparency.asp） –

不透明度將爲包括文本在內的所有div內容添加透明度。 –

您可以使用rgba()，最後一個參數可以用來定義不透明度

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

Fiddle Demo

來源

2014-01-20 17:28:02

如何在不影響文字的情況下製作透明盒子？

回答

相關問題