0

如何在不导致其他 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>
4

2 回答 2

3

更改这些：

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-04T22:51:31.497 回答
0

div为背景创建一个，div为内容创建一个，并为两者创建一个包装器。使用positionofabsolute和width/height设置填充包装器的内容和背景100%。然后使用leftof 和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/

于 2013-10-04T23:37:43.063 回答