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速记时永远不需要，因为速记会自动将所有未指定的属性设置为其初始值。

因此，transparent作为背景颜色有意义的唯一用例涉及：

不使用速记，而是直接使用background-color属性;
使用它来覆盖直接应用于该元素的另一个选择器。

一个例子是

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

Answer 2

实际上，这不是必需的。

http://www.w3.org/TR/CSS21/colors.html#background
给定有效声明后，'background'属性首先将所有单独的背景属性设置为其初始值，然后分配声明中给出的显式值。

由于background-color的初始值为is transparent，因此在设置background:url(...);

时会隐式应用它

更准确地说，您的样式规则等同于

background-color: transparent;
background-image: url(...);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;

两种情况。

然而，许多作者（包括我自己）更喜欢明确设置值

以提高可读性
以防止任何浏览器错误，或只是
因为他们不知道更好

background：transparent url（）;做？

2 个答案: