html - 隐藏图像背景

Question

我有以下 css 和 html。我试图隐藏图像的背景，以便您只看到图像而没有周围的空白区域。注意:我是 CSS 新手，所以请保持温柔。哈哈

 
.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>

所以我得到的是在图像 block 中显示白色背景的图像。就像任何图像一样，实际图像周围有空白。我不想让它出现。希望我能正确解释这一点。

-免打扰

我认为我们都在同一页面上。现在，当我浏览其他使用图像的网站时，当我查看图像本身时，它们也确实有白色背景，但当在网站上显示时，它是透明的。例如查看此站点:link text并单击简单示例按钮。您会在框中的文本旁边看到图标。他们如何使白色背景变得透明？

谢谢

Answer 1

假设您有一个白色背景的图像，我会在 photoshop 中打开 png 并删除背景层，然后将其设为透明 png。这样，图像后面的背景就会透出来。