0

こんにちは、私は CSS を使用していますが、テーブルと行の代わりに div を学習しています。背景なしの背景画像 (透明な背景) を添付するたびに、Photoshop の背景が透明であるにもかかわらず、Web サイトの見通しに白い背景が表示されるのはなぜですか? 白い背景を削除するにはどうすればよいですか? 私を正しい道に導いてください。ありがとう

私は background-color:transparent; を試しました。動いていない ：（

これは、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 に答える