隱藏圖像背景

我有以下的CSS和HTML。我試圖隱藏圖像的背景，以便您只看到沒有其周圍空白區域的圖像。注意：我是一個使用CSS的noobie，所以請溫和。笑隱藏圖像背景


.boxcontainer { 
    font-size: 12px; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    width: 300px; 
    z-index: 1000; 
} 

.boxwithicon 
{ 
    background: transparent; 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
    padding-left: 50px; 
} 

.boxstatus { 
    -moz-border-radius: 10px 10px 10px 10px; 
    background-color: rgba(0, 0, 0, 0.4); 
    border: 3px solid #000000; 
    color: #FFFFFF; 
    /*margin-bottom: 5px; */ 
    padding: 15px; 
    position: relative; 

}

HTML：

<div class="boxcontainer"> 
<div id="head1" ><b><u>Test</u></b></div> 
<div class="boxstatus boxwithicon"> 
<img src="images/smrsfolderopen.png" alt=""><a href="http://localserver/page">Customers</a> 
</div> 
</div>

那麼我現在得到的是我在圖像塊白色背景上顯示的圖像。就像任何圖像一樣，在實際圖像周圍有空白區域。我不想讓它出現。希望我正確地解釋這一點。

-DND

我想我們都在同一頁面上。現在，當我瀏覽其他使用圖像的網站時，他們確實有白色背景，當我查看圖像本身時，卻在網站上顯示時透明。比如看看這個網站：link text然後點擊Simple Example按鈕。您會在框中看到文字旁邊的圖標。他們如何讓白色背景變得透明？

感謝

來源

2010-12-13 DotNetDude

你可以發佈這個地方的實時網址？我沒有看到在CSS中引用的背景圖像...？ – 2010-12-13 16:06:58

http://jsfiddle.net/非常適合共享代碼示例 – 2011-02-26 20:49:02

假設你有一個白色背景的圖像，我會打開Photoshop中的PNG和刪除背景層，然後使它成爲一個透明的PNG。這樣，圖像背後的背景就會出現。

來源

2010-12-13 16:08:43 Danny

.boxcontainer { 
    background: transparent;// you actually want to make sure you're not overriding this in any other elements further up the DOM 
    font-size: 12px; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    width: 300px; 
    z-index: 1000; 
} 

.boxwithicon 
{ 
    background: transparent; 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
    padding-left: 50px; 
} 

.boxstatus { 
    -moz-border-radius: 10px 10px 10px 10px; 
    background: transparent;// and NOT a set color. that would make it NOT be transparent... 
    border: 3px solid #000000; 
    color: #FFFFFF; 
    /*margin-bottom: 5px; */ 
    padding: 15px; 
    position: relative; 

}

來源

2010-12-13 16:08:52 FatherStorm

您需要編輯圖像並使背景透明。

注意，它不會在IE6，unless you use a filter工作。

來源

2010-12-13 16:09:44 SLaks

Png文件有能力具有透明度。但這並不意味着圖像有任何透明度設置。我首先檢查圖像，看看發生了什麼。

除此之外，我沒有看到任何會導致空白的東西... 上面的代碼似乎沒有針對圖像本身的任何樣式。

隨時帶着疑問跟進，我會很樂意幫助您解決。

來源

2010-12-13 16:11:21 jackreichert

隱藏圖像背景

回答

相關問題