如何獲取不透明背景框而不會導致其他div盒變透明

如何獲取不透明背景框而不會導致其他div盒變透明。這裏是我用來獲取我的不透明框在頁面上的當前框，但代碼導致所有div盒變得透明的代碼。我該如何解決這個問題。如何獲取不透明背景框而不會導致其他div盒變透明

<style> 
    #background 
    { 
    width:400px; 
    height:180px; 
    margin:30px 50px; 
    background-color:#ffffff; 
    border:1px solid black; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
    } 
</style> 
<div id="background"> 
<?php 
require "../login/config.php"; 
$host=''; 
$db = ''; 
$dbuser = ''; 
$dbpass = ''; 
$conn = mysql_connect($host, $dbuser, $dbpass,$db); 
if(! $conn) 
{ 
    die('Could not connect: ' . mysql_error()); 
} 
    mysql_select_db(''); 

if(isset($_POST['submit'])) { 
$name=$_POST["element_1"]; 
$stdatemm=$_POST["element_2_1"]; 
$stdatedd=$_POST["element_2_2"]; 
$stdateyy=$_POST["element_2_3"]; 
$endatemm=$_POST["element_3_1"]; 
$endatedd=$_POST["element_3_2"]; 
$endateyy=$_POST["element_3_3"]; 
$staddr=$_POST["element_4_1"]; 
$addr2=$_POST["element_4_2"]; 
$city=$_POST["element_4_3"]; 
$state=$_POST["element_4_4"]; 
$zip=$_POST["element_4_5"]; 
$desc=$_POST["element_5"]; 
//$file=$_FILES['element_6']; 
$link=$_POST["element_7"]; 
$stdate=$stdatemm."/".$stdatedd."/".$stdateyy; 
$endate=$endatemm."/".$endatedd."/".$endateyy; 
$user=$_POST["postuser"]; 
if(($_FILES['element_6']['size']) > '0') { 

$fileName = $_FILES['element_6']['name']; 

$tmpName = $_FILES['element_6']['tmp_name']; 

$fileSize = $_FILES['element_6']['size']; 

$fileType = $_FILES['element_6']['type']; 

if($fileName != "") 
{ 
if(move_uploaded_file ($tmpName, '../login/image/'.$fileName))//image is a folder in which you will save image 
{ 
    $query = "INSERT INTO MOdeals (fname,stdate,endate,addr1,addr2,city,state,zip,name,size,type,content,link,description,user) VALUES('" . mysql_real_escape_string($name) . "','$stdate','$endate','" . mysql_real_escape_string($staddr) . "','" . mysql_real_escape_string($addr2) . "','$city','$state','$zip','" . mysql_real_escape_string($fileName) . "','$fileSize','$fileType','" . mysql_real_escape_string($content) . "','$_POST[element_7]','" . mysql_real_escape_string($desc) . "','$user')"; 

} } } else 
$query = "INSERT INTO MOdeals (fname,stdate,endate,addr1,addr2,city,state,zip,name,size,type,content,link,description,user) VALUES('" . mysql_real_escape_string($name) . "','$stdate','$endate','" . mysql_real_escape_string($staddr) . "','" . mysql_real_escape_string($addr2) . "','$city','$state','$zip',' ','0',' ',' ','$_POST[element_7]','" . mysql_real_escape_string($desc) . "','$user')"; 

$q2=mysql_query($query) or die('Error, query failed'. mysql_error()); 
if($q2) { 
echo ""; } else { 
echo "error"; 
}   
} 

//mysql_set_charset("UTF8"); 
$result = mysql_query("SELECT * FROM MOdeals ORDER BY stdate DESC"); 
$data = mysql_query("SELECT stdate FROM MOdeals ORDER BY id ASC"); 
$y=1; 
$result2 = mysql_real_escape_string($result); 
echo "<div id='left' style='min-height:700px;margin-top: 2px;'><table style='-moz-border-radius: 15px;border-radius: 15px;border-bottom:1px solid gray;background-color:white;float: left;text-align: left;margin: auto;width: 75%;'><tr style='font-weight:bold;'><td></td> <td>Title</td><td>Start Date</td><td>City</td></tr>"; 
//header('Content-type: text/html; charset=utf-8'); 
//print_r(mysql_fetch_array($result)); 
while($row = mysql_fetch_array($result)) 
{ 
$abcd = $row['fname']; 
echo "<tr><td><img src='../login/image/".$row['name']."'style='width: 145px;height: 154px;'></td>"; 
    echo '<td><form action="deals.php" method="get" style="margin:0px;"><input type="hidden" value="'; 
    echo $abcd; 
    echo '" name="name"><input type="submit" style="background-color: white;border: none;color: #FF0000;text-decoration: underline;" name="submit2" value="'; 
    echo $abcd; 
    echo '"></form><br/>'; 
    echo "</td><td>".$row['stdate']."</td>"; 
    echo "</td><td>".$row['city']."</td></tr>"; 
    $y++; 
    } 
    echo "</table></div>"; 
    echo "<div id='right' style='margin-top: -695px;-moz-border-radius: 15px;border-radius: 15px;background-color:white;height:49px;'><div style = 'margin-top: -95px;margin-left: -85px;margin-right: -85px;'><p><div class='center'> 
<img src='../../pictures/addeals.jpg' width='100%' height='100%'> 
</div></div></div>"; 
    echo "<div id='right2' style='margin-top: -455px;margin-bottom: -455px;-moz-border-radius: 15px;border-radius: 15px;background-color:white;height:49px;'><div style = 'margin- top: -95px;margin-left: -85px;margin-right: -85px;'><p><div class='center'> 
<img src='../../pictures/win.jpg' width='100%' height='100%'> 
</div></div></div>"; 


?> 
</div> 
</div>

來源

2013-10-04 user2848316

可能重複HTTP ：//stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it） –

這不一定與CSS3有任何關係，因爲IE8的支持是要求。 – Shea

更改這些：

background-color:#ffffff; 
opacity:0.6; 
filter:alpha(opacity=60); /* For IE8 and earlier */

要這樣：

background-color: rgba(255, 255, 255, 0.6);

注意，對於IE8的支持，最好的方式來實現上述是使用重複的1x1像素透明PNG圖像作爲背景。

來源

2013-10-04 22:51:31

+1但是，如果需要IE8，請注意['rgba（）'在IE8中不受支持]（http://caniuse.com/css3-colors）。 – Boaz

如果您必須在IE8及以下具有透明背景，我建議使用透明PNG作爲背景。 –

不要給我建議 - 將它添加到你的答案:) – Boaz

爲背景創建一個div，爲內容創建一個div，爲兩者創建一個包裝。使用設置爲100%的position的absolute和width/height設置內容和背景以填充包裝。然後使用left和top將背景上的內容分層到背景自己的值。如果你不想絕對定位包裝，你可以將其設置爲position至relative。

它通過創建兩個單獨的圖層來工作，以便不透明度更改爲背景圖層不會影響內容圖層。

下面是代碼：

<div class="wrapper"> 
    <div class="background"></div> 
    <div class="content">Hello World!</div> 
</div> 
<style> 
    body { background-color:#000 } 

    .wrapper { height:200px; left:50%; margin:-100px 0 0 -100px; position:absolute; top:50%; width:200px } 

    .wrapper > .background, 
    .wrapper > .content { height:100%; left:0px; position:absolute; top:0px; width:100% } 

    .wrapper > .background { background-color:#fff; filter:alpha(opacity=60); opacity:0.6 } 
</style>

查看例如：http://jsfiddle.net/ZbTWE/show/
編輯例如：http://jsfiddle.net/ZbTWE/

[？CSS不透明只有背景色不就行了文本（中

來源

2013-10-04 23:37:43 Shea

如何獲取不透明背景框而不會導致其他div盒變透明

回答

相關問題