div中的背景图片使div透明

Question

我试图让一个div拥有自己的背景图像，但是每次添加该图像时，它都会使div透明，以便显示出主要背景。 我搜寻了这个网站和其他网站，但都无济于事。

 <!DOCTYPE HTML>
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Mobile video game parties offering the ultimate gaming experience. All inside a top of the line mobile gaming trailer." />
<meta name="fb_admins_meta_tag" content="USER_ID"/>
<meta property="og:title" content="WeGotGamez| Mobile Video Game Party"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.wegotgamez.com/"/>
<meta property="og:site_name" content="WeGotGamez| Mobile Video Game Party"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="Mobile video game parties offering the ultimate gaming experience. All inside a top of the line mobile gaming trailer."/>
<META NAME="robot" CONTENT="index,follow">
<META NAME="refresh" CONTENT="120">


<head>
<title> Mobile Video Game Party| WeGotGamez| Mobile Gaming, Sacramento </title>
<head>
<link rel="stylesheet" type="text/css" href="homepage3.css">
<style>
body 
{
background-image:url('drkdp.jpg');

}
</style>
</head>


<body>


<div id="container" style="width:1060px;">

    <div style="clear: both;"></div>

    <img src="c:\users\wgg1\desktop\websitemaint\gallery\hdrimg.png" style="float: right; width: 500px; height: 150px; margin-right: -100px; margin-left: 15px;"/><a href="C:\Users\WGG1\Desktop\WebsiteMaint\index.html"><img  src="C:\Users\WGG1\Desktop\WebsiteMaint\logo.png"         style="float: left;margin-top: 0px; margin-left: 0px; width: 400px; height: 135px;"/></a><h3 style="float:right;">3201 Evergreen Ave Ste 360</br>West Sacramento, CA, 95691</br>(916)945-0837</br><a href=https://www.facebook.com/WEGOTGAMEZ><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\fb16x16.png"/></a><a href=https://twitter.com/wegotgamez><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\twt16x16.png"/></a><a href=http://instagram.com/wegotgamez><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\igrm16x16.png"/></a>
    </div>
    </br>
</div>


<div id='cssmenu' style="margin-left: 0px; margin-top: 150px; margin-bottom: 25px;">
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\equipment.html'><span>Equipment</span></a>
      <ul>
         <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingtrailer.html'><span>Mobile Gaming Trailer</span></a></li>
         <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingcube.html'><span>Portable Gaming Stations</span></a></li>
         <li class='last'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\retroarcade.html'><span>Retro Arcade's</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Party Packages</span></a>
      <ul>
         <li class='last'><a href='#'><span>Schedule An Event</span></a></li>
      </ul>
   </li>
   <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\tournaments.html'><span>Tournaments</span></a></li>
   <li><a href='#'><span>About US</span></a></li>
   <li><a href='#'><span>Game Library</span></a></li>
   <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\gallery.html'><span>Gallery</span></a></li>
   <li><a href='#'><span>FAQ</span></a></li>
   <li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>


<div class="photobanner">
        <img class="first" src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\052.jpg" alt="">
        <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\008.jpg" alt="">
        <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\019.jpg" alt="">
        <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\026.jpg" alt="">
        <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\033.jpg" alt="">
        <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\041.jpg" alt="">

</div>

<div id="col1"><h4 style="text-align:left; margin-left:5px">Let<b> We Got Gamez</b> and our friendly game coaches bring the ultimate in gaming experiences to your next event.<br><br><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><br><br>  Whether it be a birthday party, block party, wedding, or even an office team building event, we've got you covered.<br><br><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><br><br>  With our unique trailer set up and our extensive game libraries, your event will be the one everyone will be talking about for weeks to come!</h4>
<h4 style="text-align:left; margin-left:5px"><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font>
    </h4>


    <h4 style="text-align:left; margin-left:5px">Check out the competition and you will see that we offer the most advanced and savvy mobile gaming platforms anywhere.<br><br><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><br><br>  Our gaming trailer comes equipped with 8 individual gaming stations each boasting an XBOX 360, PS3, gaming chair, stereo headset, and 24" t.v screens.<br><br><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><font face="wingdings"> &#171; </font><br><br>  We conform to the most popular gaming tournament standards and regulations, giving you a professional feel for house tournaments.</h4>
    </div>
<div id="col2"><h4 style="text-align:center;margin-right:15px;margin-left:15px;margin-top:15px">Our Mobile Gaming Trailer brings the party right to your house !</h4>

<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\042.jpg" style="align:center;width:450px;height:250px;margin-top:5px;">
    </hr>
    <h4 style="text-align:center;margin-left:15px;margin-right:15px;">No crowding around a single bench to play. Get a truly immersive experience with our unique gaming stations.</h4>
    <br>
    <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\052.jpg" style="align:center;width:450px;height:250px;margin-bottom:15px">
    <h4 style="text-align:center;margin-left:15px;margin-right:15px;">Our portable game cubes fit anywhere , inside or outside your business or home !</h4>
    </div>
<div id="col3"><h4 style="text-align:center;">Affiliations:</h4>
    <br>
    <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\astro.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
    <br>
    <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\avngr.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
    <br>
    <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\skulc.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
    <br>
    <img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\sqdgrp.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
    <br>
    </div>

    <br>
    <br>




<div id='cssmenu1' style="margin-left: -25px; margin-right: 35px; margin-top: 15px; margin-bottom: -25px; display:inline-block; position:relative">
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\equipment.html'><span>Equipment</span></a>
      <ul>
         <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingtrailer.html'><span>Mobile Gaming Trailer</span></a></li>
         <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingcube.html'><span>Portable Gaming Stations</span></a></li>
         <li class='last'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\retroarcade.html'><span>Retro Arcade's</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Party Packages</span></a>
      <ul>
         <li class='last'><a href='#'><span>Schedule An Event</span></a></li>
      </ul>
   </li>
   <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\tournaments.html'><span>Tournaments</span></a></li>
   <li><a href='#'><span>About US</span></a></li>
   <li><a href='#' target='_blank'><span>Game Library</span></a></li>
   <li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\gallery.html'><span>Gallery</span></a></li>
   <li><a href='#'><span>FAQ</span></a></li>
   <li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
<p style="color:blue; margin-top:-5px">© 2013 by We Got Gamez, Custom Upfits, and Electrical Service Specialties</p>
</div>
</body>
</html>




 html {
    text-align: center;


}

body{
    margin-right: 40px ;
    margin-left: 70px;
    width: 1200px;
    margin-bottom: 10px;
    margin-top: 5px;
    overflow-x: hidden; 
    overflow-y: hidden;
    height: 100%;
}
#wrapper {
    width: 1000px;
    margin-right: 40px;
    margin-left: 70 px;
    height: 100%;

}
h1 {
    color:#FBF2EF;
    font-family: 'times new roman';
}
h2{
    color:#fbf2ef;
}
h3
{
    color:#fbf2ef;
    font-family: 'times new roman'

}
hr {
    color: #f00;
    background-color: #f00;
    height: 1px;
}

p {
     font-color:'white';
}
button {
  height: 100px;
  width: 200px;
  padding:5px;
  background-color: #dcdcdc;
  border: 1px solid #666;
  color:#000;
  text-decoration:none;
}
strong{
    font-weight:bold;
}
#col1
{
    float: left;
    width: 20%;
    margin-bottom: 10px;
    background-image:url('C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\dpimg3.jpg');
    background-repeat: no-repeat;
    border:double 7px #000000;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;


}

#col2
{
    float: left;
    width: 48%;
    margin-left: 3%;
    background-color: grey;
    margin-bottom: 10px;
    border:double 7px #000000;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

#col3
{
    float: left;
    width: 20%;
    margin-left: 3%;
    background-color: grey;
    margin-bottom: 10px;
    border:double 7px #000000;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
#col4{
    position:center;
    width: 48%;
    margin-left: 3%;
    background-color: grey;
    margin-bottom: 10px;
    border:double 7px #000000;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
div .body{
border:double 7px #000000;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}   
#footer {
    margin-top: 150px; /* negative value of footer height */
    height: 5px;
    margin-bottom: 5px;
    min-width: 1200px;


}

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;

}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #ffffff;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.active a {
  background: #646464 url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  filter: none;
}
#cssmenu > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  filter: none;

}
#cssmenu > ul > li a {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  border-bottom: 1px solid #5d5d5d;
  border-top: 1px solid #5d5d5d;
  border-right: 1px solid #5d5d5d;
  line-height: 34px;
  padding: 0 35px;
  filter: none;
}
#cssmenu > ul > li a:hover {
  background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  min-width: 100%;
  text-align: center;

  /* IE7 */

  *width: 100%;
}
#cssmenu .has-sub ul li {
  text-align: center;
}
#cssmenu .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}

.photobanner {
    height: 65px;
    width: 960px;
    margin-bottom: 80px;
    margin-right:100px;
    margin-top: 5px;
    margin-left: 105px;
}


.photobanner img {
     height: 85px;
     width: 150px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photobanner img:hover {
    -webkit-transform: scale(2.0);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;

    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
div.container {
    border: 1px solid #000000;
    overflow: auto;
    width: 100%
}
#cssmenu1{
    height: 50px;
    margin-bottom: -100px;
}
#cssmenu1 ul,
#cssmenu1 li,
#cssmenu1 span,
#cssmenu1 a {
  margin: 0;
  padding: 0;
  position: relative;

}
#cssmenu1:after,
#cssmenu1 ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu1 a {
  color: #ffffff;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}
#cssmenu1 ul {
  list-style: none;
}
#cssmenu1 > ul > li {
  float: left;
}
#cssmenu1 > ul > li.active a {
  background: #646464 url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  filter: none;
}
#cssmenu1 > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  filter: none;

}
#cssmenu1 > ul > li a {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  border-bottom: 1px solid #5d5d5d;
  border-top: 1px solid #5d5d5d;
  border-right: 1px solid #5d5d5d;
  line-height: 34px;
  padding: 0 35px;
  filter: none;
}
#cssmenu1 > ul > li a:hover {
  background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}
#cssmenu1 > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-left: 1px solid #5d5d5d;
}
#cssmenu1 > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu1 .has-sub:hover ul {
  display: block;
}
#cssmenu1 .has-sub ul {
  display: none;
  position: absolute;
  left: -1px;
  min-width: 100%;
  text-align: center;
  bottom: 100%;

  /* IE7 */

  *width: 100%;
}
#cssmenu1.has-sub ul li {
  text-align: center;
}
#cssmenu1 .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}

Answer 1

如果使用透明图像，则可能会发生这种情况。

也许一些CSS像：

div.your_div_class{
    background: url('some_image.png') #fff;
}

有助于。 在background使用#fff （白色）之类的颜色使其不透明。

您可以使用background-color: #fff; 也分开。

Answer 2

为了扩大迈克尔的答案...

假设您有透明的图像允许先前的背景泄漏，则需要在新的div上定义背景颜色。

但是请记住，如果使用复合属性，它将覆盖之前定义的所有背景属性。

因此，在这种情况下，您只会看到白色：

div.your_div_class {
  background-image: url('your_image.png');
  background: #FFF;
}

但是，如果使用特定的图像和颜色背景属性，则它们是相加的。 因此，在这种情况下，您将获得具有白色背景的图像：

div.your_div_class {
  background-image: url('your_image.png');
  background-color: #FFF;
}