6

我看到了一个css代码

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

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

谢谢你。

4

2 回答 2

8

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

以上等价于：

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

通常，如果背景图像无法加载，或者图像包含透明区域，或者图像没有重复填充整个区域（在您的示例中当然不是这种情况），颜色通常很重要。

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

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

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

一个例子是

body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }
于 2012-04-26T06:22:16.950 回答
3

实际上，这不是必需的。

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

由于background-color的初始值为，transparent因此在设置时会隐式应用background:url(...);

更准确地说，您的样式规则相当于

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

在这两种情况下。

但是，许多作者（包括我自己）更喜欢显式设置值

  • 为了可读性
  • 以防止任何浏览器错误，或者只是
  • 因为他们不知道更好
于 2012-04-26T06:31:01.017 回答