用CSS製作一個透明盒子

我想在容器的背景上製作一個透明盒子，但是，我不能在背景中間做它，而是當我嘗試使用頂級盒子時，緣來實現我的設計，它會移動的背景圖像倒也，所以我想問一下，爲什麼我不能讓它像由W3C給出的例子中http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency 用CSS製作一個透明盒子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <META http-equiv="Content-Type" Content="text/html; Charset=UTF-8"> 
    <title> 
     Portal 
    </title> 
    <link rel="stylesheet" href="style.css" type="text/css"/> 
    <script type="text/javascript" src="ajax.js"></script> 
</head> 
<body onload="load()"> 
    <div id="header"> 
     <img src="images/logo.gif" id="logo" alt="Logo"/> 
     <a href="http://www.google.com"> 
      <img src="images/a.png" id="logo2" align="right" alt="logo"/> 
     </a> 
    </div> 
    <div id="container"> 
     <div id="function"></div> 
     <div id="Display"></div> 
     <div id="View"></div> 
    </div> 
    <div id="footer"> 
    </div> 
</body> 
</html>

這裏的CSS文件：

body{ 
font-size:100%; 
margin: 0em 9em 0em 9em; 
} 

#header{ 
width:55em; 
height:2.375em; 
background:black; 
border: 0em 0em 0em 0em; 
} 

#logo{ 
padding: 0em 0em 0em 2em; 
} 

#logo2{ 
width:3.618em; 
height:2.3em; 
margin: 0.1em 0.25em 0.1em 0em; 
} 

#container{ 
width:55em; 
height: 36.25em; 
background-image:url("images/background1.jpg"); 
margin: 0.25em 0em 0em 0em; 
} 

#function{ 
width:35em; 
height:32.625em; 
margin: 2em 10em; 
background-color: #ffffff; 
opacity:0.6; 
filter:alpha(opacity=60); 
} 

#footer{ 
font-family:"Times New Roman"; 
width:62em; 
font-size:0.75em; 
color:grey; 
border-top-style:solid; 
border-color:grey; 
border-width:0.25em; 
margin: 0.25em 0em 0em 5em; 
}

來源

2012-07-12 Conrad

相關http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on – 2014-03-02 14:09:45

有幾種方法可以做到這一點。您可以使用：

不透明度：

style { 
    opacity: 0.5; 
    filter: alpha(opacity=50); // For IE 
    -moz-opacity:0.5; // For Firefox < 5.0 
}

RGBA顏色：

style { 
    background: rgba(0, 0, 0, 0.5); // The last item is the opacity 
}

的圖像：

style { 
    background: url('image/transparent_img.png') repeat top left; 
}

RGBA是最好的方法，但在舊的IE版本不支持。不透明度不是很好的支持（IE再次）。你可以使用rga（）作爲後備，但現在我個人認爲透明圖像是你最好的X瀏覽器。

編輯：看到，因爲我誤解了這個問題，你只想添加填充到#container的。

來源

2012-07-12 09:19:06 SpaceBeers

我明白所有這些方法可以實現一個透明的盒子，實際上，我可以使盒子，但我的問題是相反的位置問題，目前，我的透明盒將保持與容器的背景圖像保持聯繫，這看起來不太好看，我試圖在功能div前添加一個虛擬分區，並將buttom邊緣設置爲有些價值，但仍然不起作用，所以我想問一下，我不能讓它成爲W3C之一的例子，透明盒位於中心位置。 – Conrad 2012-07-12 09:34:47

好吧，所以你希望＃功能div不會觸及#container的頂部？是對的嗎？ http://jsfiddle.net/spacebeers/jNATf/ – SpaceBeers 2012-07-12 09:38:04

雅，這正是我想要做的，這個網站看起來挺方便的，所以即使我不能上傳屏幕截圖，只要發佈代碼，我可以讓其他人瞭解問題 – Conrad 2012-07-12 09:52:26

它工作正常，但您的定位錯誤。

div與background: black不包含您的div與transparent背景。你應該改變它在你的HTML。當你在css中添加background: black;到你的body時，你也可以觀看它的工作。

來源

2012-07-12 09:17:52

你是在談論頭div？實際上，在我的設計中，我希望將我的頁面分爲三部分：頁眉，容器和頁腳，每個頁面都有5px的邊距。而在容器div中，我希望它的中間有一個透明框來顯示內容，比如一些表格，一個段落。但是我遇到的問題是當我嘗試通過設置函數div的邊距值來定位它時，它也將背景向下推，但是如果我不添加頂部和底部的邊距，它會觸摸頂部背景圖像，看起來不太好。 – Conrad 2012-07-12 09:29:41

當您添加「邊距」元素時，不會在其上顯示背景。如果你使用填充，它會。所以，如果你有正常的定位問題，你也可以嘗試絕對定位。但我不推薦它。對於正常的定位，你可以在css中使用'margin：5px auto'，從頂部和底部到左右中心都有5px的空間。 – 2012-07-12 09:39:47

好的，謝謝，讓我試着讓它第一 – Conrad 2012-07-12 09:42:02

用CSS製作一個透明盒子

回答

相關問題