新手：为什么背景图案 .png 图像的颜色没有变化？

Question

我在这里浏览了很多问题，但没有一个与此查询相关。

我只是想更改背景 .png 图像的颜色。但它的颜色是不变的。然后，我将 .png 图像转换为 .gif 格式并再次尝试。但是这一次，.gif 图像的颜色也没有改变。

图片链接 = http://www.flickr.com/photos/34259785@N00/6803476044/

请说明为什么图像的颜色没有改变。以下是代码：-

background-color: #3399FF;
background-image: url("images/diagonal_striped_brick.gif");

Answer 1

图像没有背景透明度。图片的白色背景是纯色，不会让页面的背景色透出来。

您可以使用图像编辑器编辑图像并尝试将图像的白色背景转换为全透明。

Answer 2

刚刚发了一个demo。您使用的图片不透明。

---

更新：如何使图像透明？

• 使用 Photoshop 等图像编辑器打开图像。
• 更改了图像的不透明度值
• 将其另存为 .png 以获得更好的质量。

现在，上面的代码将能够为您提供所需的效果。

Answer 3

.jpg 文件不能有透明。为此，请使用带有 Alpha 通道的 png 文件。

请参阅此example，了解在图像顶部叠加颜色的版本。