css引用的图片不透明

CSS 中的背景图像默认情况下是不透明的，例如，如果使用以下代码将背景图像应用于元素：

element {
        background-image: url("image.jpg");
}

则图像将完全覆盖元素，并且不会透明。

要使背景图像透明，可以使用 CSS3 中的 opacity 属性，例如：

element {
        background-image: url("image.jpg");
        opacity: 0.5;
}

在上面的示例中，图像的透明度设置为 0.5，因此它将半透明显示在元素的背景上。

另一种方法是将透明度应用于元素本身而不是图像。例如：

element {
        background-image: url("image.jpg");
}
element::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
}
    

在上面的示例中，我们使用 ::before 伪元素来为元素创建一个半透明的遮罩层，这样图像就会透过这个层次进行显示。

无论哪种方法，都可以轻松地使背景图像透明，以便更好地展示元素内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！