0

大家好，我正在使用 CSS，我仍在学习 div 来替换表格和行。我想知道每当我附加一个没有背景的背景图像只是普通图像（透明背景）时，即使它在 Photoshop 中的背景是透明的，它怎么会在网站外观上显示白色背景？如何去除白色背景？请把我引向正确的轨道。谢谢

我试过背景颜色：透明；它不工作:(

这是我在 css div baclground-image http://postimg.org/image/75t1jgqk3/上使用的输出图像

这是在 Photoshop http://postimg.org/image/o1jddulcx/中具有透明背景的图像视图

这是我的 css 和 html 代码http://jsfiddle.net/XpCmb/

@charset "utf-8";
/* CSS Document */
body
{
 margin:0px;
 padding:0px;
}

#container
{
    padding:30px;
    min-width:1024px;
    min-height:768px;
    background:#d8e0eb;
    border:0px;
    margin:0px;


}

#container2
{

    width:1000px;
    height:730px;
    background-color:#FFF;
    padding-top:25px;
    padding-bottom:15px;

}

#wrapper
{
    min-width:800;
    min-height:600px;   
}

#header
{
    width:900px;
    height:120px;
    background-color:violet;

}

#menubar
{
    background-color:#FFF;
    width:452px;
    height:30px;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration: none;
    float:;

}

#content
{
    width:1000px;
    height:40px;
    background-color:#f9f2e0;



}


#contentbody
{
    width:1000px;
    height:auto;
    padding-top:50px;
    margin-left:0;
    margin-right:0;
    background-color:#f9f2e0; /*baclground of content holder body */
    padding-bottom:100px; /*adjust the space bottom of content holder text */


}

#contentbodytext
{

    margin-left:50px;
    text-align:left;
}





ul
{
    list-style-type:none;
    padding:0;
    margin:0;
    display:inline;

}

li
{
    list-style-type:none;
    background-color:#;
    border-right:1px solid #CCC;
    float:left;
    padding-left:30px; /*adjust space of menu text to each other*/
    padding-right:30px;
    padding-top:8px;
    padding-bottom:8px;



}



a:link 
{
    text-decoration:none;
}    /* unvisited link */
a:visited {text-decoration:none;
} /* visited link */


li:hover
{
    background-color:#ffd640;   
}

ul#mcolor li:hover > a
{
     background-color:#ffd640; <!-- sets all link color when hovering to yellow  -->
}

ul#mcolor li.active a 
{ 
    color: rgb(25, 25, 25);
    background-color: #ffd640;
} 

#mcolor li.active {
    background: none repeat scroll 0 0 #ffd640 !important;
}


/*FOLLOWS ARE MISCELLENEOUS LIKE  DIVS image holder etc. */ 






/*ul:hover li
{
    opacity: 0.5;   
}

ul li:hover
{
    opacity: 1; 
}

nk */



#image1
{
    padding-left:50px;
    float:left;


}

#p1a
{
    padding-left:350px;




}
#introductiona
{
    padding-right:50px;
    text-align:justify;
    text-align:justify;

}

#p1
{   
    margin-left:50px;
    text-align:left;
    margin-top:70px;

}
#bulletin
{
    float:left;
    margin-left:10px;
    background-image:url(bulletinboard.jpg);
    background-size:550px 260px;
    background-repeat:no-repeat;
    width:550px; 
    height:260px;
    background-color:#f9f2e0;
}
4

1 回答 1

4

您的图像保存为 jpg，不保存透明度。将您的图像保存为具有透明度的 PNG 或 GIF，您应该可以解决您的问题。

于 2013-09-20T13:52:33.537 回答