css - 背景: transparent url(); do?是什么

Question

我看到一段css代码是这样的

   body { background: transparent url ('background.jpg') repeat scroll;} 

透明值有什么作用？我试着用谷歌搜索这个，但没有帮助。 background.jpg 不会覆盖它吗？

谢谢。

Answer 1

transparent 是颜色。元素可以同时具有背景图像和背景颜色。

以上等同于:

body {
    background-color: transparent;
    background-image: url('background.jpg');
    background-repeat: repeat;
    background-attachment: scroll;
}

颜色通常很重要，例如背景图像无法加载，或者图像包含透明区域，或者图像没有重复填充整个区域(诚然，在您的示例中并非如此)。

但是，由于 transparent 是“初始值”，因此在使用 background 速记时永远不需要，因为速记会自动将所有未指定的属性设置为它们的初始值.

因此，透明作为背景色有意义的唯一用例涉及:

1. 不使用简写，而是直接使用background-color属性；
2. 使用它来覆盖直接应用于该元素的另一个选择器。

一个例子是

body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }