Question

我有以下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并单击“简单示例”按钮。您将在框中看到文本旁边的图标。他们如何使白色背景透明？

由于

Answer 1

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

Answer 2

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

}

Answer 3

您需要编辑图像并使背景透明。

请注意，它不适用于IE6 unless you use a filter。

Answer 4

Png文件具有透明度。但这并不意味着图像具有任何透明度设置。我首先检查图像，看看是什么。

除此之外，我没有看到任何会导致空白的事情...... 您的代码中似乎没有任何样式以图片本身为目标。

随时回答问题，我们很乐意帮助您排除故障。

隐藏图像背景

4 个答案: