html - 透明 png 不呈现为透明？

Question

我将图像保存为透明 png，但我似乎无法修复它!？!有什么想法吗？？？

它应该是这样的:

这是 GIMP 中的图像副本，显示它确实是透明的:

最后，一些好的旧代码:

标记:

<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>

搜索框 CSS:

.search, .search:active, .search:focus, .search:visited {
    position: absolute;
    color: #fff;
    top: 3px;
    width: 368px;
    right: 9%;
    font-size: 28px;
    z-index: 3;
    border-radius: 20px;
    /* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
    text-indent: 10px;
    text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
    background-color: #00D4C7;
}

搜索图标 css 本身:

Pseudo ::before element
.search:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 268px;
    background-image: url("images/icon-search.png");
    background-color: rgb(0, 185, 171);
    width: 46px;
    height: 30px;
    z-index: 4;
}

注意:如果我从表单中删除类搜索，它会删除我的图像，如果我从输入元素中删除类搜索，它仍然会在我的图像上呈现那种时髦的阴影...任何想法？

编辑 1: 如果我按照建议通过设置图像的显式尺寸(就像我对其他伪元素所做的那样没有问题)，它不会解决我的问题。我已经提交了元素，所以此时我想知道发生了什么以及如何解决这个问题。我求助于 css hack，将亮度更改为更接近匹配 [仍然有微弱的轮廓😞]

编辑 2: 显示 JS Fiddle !

Answer 1

我的图像本身并不是真正透明的。有一个小的不透明 channel 导致灰色雾度出现在非白色背景上。我在发布到 imgur 时听到了这个消息......并在我实际使用 按颜色选择 制作图层副本(在 photoshop 中)时确认了这一点。

解决方案: 检查您的图像...为此，将其单独加载到窗口并将 html 正文设置为非白色。希望我在提交之前想到这样做: