How can I get a opacity background box without causing my other div boxes to go transparent

Question

How can I get a opacity background box without causing my other div boxes to go transparent. Here is the code I am using to get my opacity box around the current boxes on the page but the code causes all div boxes to become transparent. How can I fix this issue.

<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>

possible duplicate of [CSS opacity only to background color not the text on it?](http://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it) — omma2289, Oct 04 '13 at 22:54
This doesn't necessarily have anything to do with CSS3, as IE8 support is a requirement. — Shea, Oct 04 '13 at 23:38

francisco.preller · Answer 1 · 2013-10-04T23:21:34.967

3

Change these:

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

To this:

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

Note that for IE8 support, the best way to achieve the above would be to use a repeated 1x1 pixel transparent PNG image as a background.

edited Oct 04 '13 at 23:21

answered Oct 04 '13 at 22:51

francisco.preller

6,559
4
28
39

1

+1 But if IE8 is a requirement, then note that [`rgba()` is not supported in IE8](http://caniuse.com/css3-colors). – Boaz Oct 04 '13 at 22:53
If you must have a transparent background on IE8 and under, I suggest using a transparent PNG for a background. – francisco.preller Oct 04 '13 at 22:56
1

Don't suggest it to me then - add it to your answer :) – Boaz Oct 04 '13 at 22:57
1

*Do not* use an image to achieve this, unless the structure of your code requires it. – Shea Oct 04 '13 at 23:42

Shea · Answer 2 · 2013-10-04T23:47:57.327

Create a div for the background, a div for the content, and a wrapper for both. Set the content and background to fill the wrapper, using a position of absolute, and width/height set to 100%. Then layer the content on top of the background using left of and top to that of the background's own value. If you do not want to absolutely position the wrapper, you can set it's position to relative.

It works by creating two separate layers, so that opacity changes to the background layer will not effect the content layer.

Here is the code:

<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>

View the example: http://jsfiddle.net/ZbTWE/show/
Edit the example: http://jsfiddle.net/ZbTWE/

How can I get a opacity background box without causing my other div boxes to go transparent

2 Answers2