[分享]css中引用的png为啥是白底

在使用CSS样式文件时，不少开发人员会遇到一个常见的问题，那就是引用的PNG图片为什么总是显示白底。例如，在CSS文件中添加如下代码： backgroundimage:url(example.png)...

在使用CSS样式文件时，不少开发人员会遇到一个常见的问题，那就是引用的PNG图片为什么总是显示白底。

例如，在CSS文件中添加如下代码：

background-image:url('example.png');

但是最终在页面上显示的效果却是PNG图片被默认呈现为白底。

这是因为PNG图片本质上是一种带有透明通道的格式，可以在图片的不同部分设置不同的透明度，从而显示出透明效果。然而，当PNG图片被引用到CSS样式中时，默认情况下是没有透明效果的，而是直接使用图片自带的白色背景。

为了解决这个问题，我们需要在CSS代码中加入透明度的设置，以实现PNG图片的正确显示。

background-image: url('example.png');
background-repeat: no-repeat;
background-size: contain;
opacity: 0.8; /*设置透明度为0.8*/

通过设置透明度，PNG图片背景会变得透明，使得图片的颜色真实反映在页面上。这种方法同样适用于其他带有透明效果的图片格式，如GIF和APNG等。

总结而言，CSS中引用PNG图片为白底的主要原因是因为缺少透明度设置，只需要在样式中添加透明度代码即可解决该问题。