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

你确实给你的图像background-color: rgb(0, 185, 171);＃00b9ab

和搜索框background-color: #00D4C7;什么是rgb（0,212,199）

Answer 2

这种情况可能会发生，因为您的背景图片大小与其容器的大小.search::before不同。和/或因为您的.search::before背景颜色是不同的十六进制值。

试试这个：将background-color: transparent;和background-size: 46px 30px;添加到.search::before。这将使得如果您的背景图像小于容器，则剩余的空间将是透明的，并将背景图像大小设置为与其明确设置的容器相同。

Answer 3

我的形象本身并不是真正透明的。有一个小的不透明度通道导致灰色雾度出现在非白色背景上。当发布到imgur时，我发现了这一点....并确认当我实际使用select by color制作图层副本（在photoshop中）时。

解决方案：检查您的图片...要执行此操作，请将其自身加载到窗口并将html正文设置为非白色。希望在提交之前我想这样做：

透明png不呈现为透明？

3 个答案: