使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
当前回答
Background是背景颜色和其他一些背景相关的东西的快捷方式,如下所示:
background-color
background-image
background-repeat
background-attachment
background-position
阅读下面来自W3C的声明:
背景-速记属性用于缩短代码 也可以指定所有的背景属性在一个单一 财产。这被称为速记属性。 background的简写属性是background:
body {
background: white url("img_tree.png") no-repeat right top;
}
当使用速记属性时,属性值的顺序是:
背景颜色 背景图像 平铺方式 background-attachment 背景位置 如果缺少一个属性值,这并不重要 其他的都是这个顺序。
其他回答
我注意到在文档中没有看到的一件事是使用 背景:url(“image.png”)
像上面这样的简写,如果图像没有找到,它会发送一个302代码,而不是像你使用的那样被忽略
background-image: url("image.png")
你可以做一些非常巧妙的事情一旦你理解了你可以利用继承。然而,首先让我们了解一下这个文档的背景:
使用CSS3,你可以为元素应用多个背景。这些都是 与你提供的第一个背景相叠加 最后一个背景列在后面。只有最后一个背景 可以包含背景色。
所以当有人这样做的时候:
background: red;
他将背景色设置为红色,因为红色是最后列出的值。
当一个人这样做时:
background: linear-gradient(to right, grey 50%, yellow 2%) red;
红色仍然是背景色,但是你会看到渐变。
.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右,灰色50%,黄色2%)红色; } {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); 背景:继承; } < div class = "盒子" > < / div >
现在对background-color做同样的事情:
.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右,灰色50%,黄色2%)红色; } {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); background - color:继承; } < div class = "盒子" > < / div >
发生这种情况的原因是因为当我们这样做的时候:
background: linear-gradient(to right, grey 50%, yellow 2%) #red;
最后一个数字设置背景颜色。
然后在我们从background继承之前(然后我们得到渐变)或者背景颜色,然后我们得到红色。
假设这是两个不同的属性,在您的特定示例中,结果没有区别,因为background实际上是
背景颜色 背景图像 背景位置 平铺方式 background-attachment background-clip background-origin background-size
因此,除了background-color,使用背景简写,你还可以添加一个或多个值,而不用重复任何其他background-*属性。
选择哪一个本质上取决于你,但也可能取决于你的样式声明的特定条件(例如,如果你从父元素继承其他相关的background-*属性时只需要覆盖background-color,或者如果你需要删除除background-color之外的所有值)。
其中一个区别是:
如果你以这种方式使用图像作为背景:
background: url('Image Path') no-repeat;
然后你不能用"background-color"属性覆盖它。
但是如果你使用背景来应用颜色,它和background-color是一样的,并且可以被覆盖。
例如:http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/
有一个关于背景和背景颜色的错误
这个的区别, 当使用后台时,有时当你创建网页时 在CSS中 background: #fff //可以覆盖蒙版图像块(“顶部项目,文本或图像”)) 所以最好总是使用背景色 为了安全起见,在你的设计中,如果它是单独的