隐藏图像背景

我有以下的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

隐藏图像背景

回答

相关问题