背景颜色和背景颜色有什么区别
sta*_*tor 261 css background background-color
使用background和指定背景颜色有什么区别background-color？
片段#1
body { background-color: blue; }
小片#2
body { background: blue; }
fca*_*ran 242
假设那些是两个不同的属性,在你的具体例子中,结果没有区别,因为background实际上是一个简写
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
因此,除了background-color使用background快捷方式之外,您还可以添加一个或多个值,而不会多次重复任何其他 background-*属性.
选择哪一个基本上取决于您,但它也可能取决于您的样式声明的特定条件(例如,如果您只需要覆盖从父元素background-color继承其他相关background-*属性的时间,或者您需要删除所有值除了background-color).
- 这非常实用,因为您可以在一行*中指定所有这些属性*.请参阅[官方文档](http://www.w3.org/TR/CSS2/colors.html#background) (15认同)
- 它们是有区别的.当使用背景颜色时,我的子元素之间有透明间隙的div.但是当我只使用背景时,它是完全可靠的.他们的财产或行为存在可证实的差异. (3认同)
- Fwiw，来自@ChristianVarga的链接：*“ background”属性是用于设置各个背景属性（即“ background-color”，“ background-image”，“ background-repeat”，“ background-attachment”和“ “背景位置”）在样式表中的同一位置。给定有效的声明后，“ background”属性首先将所有单个背景属性设置为其初始值，然后分配声明中给定的显式值。*示例：`P {background：url（“ chess.png”）grey 50 ％重复固定}` (2认同)
Anr*_*rgh 146
background将取代所有之前的background-color,background-image等规格.它基本上是一种速记,但也是一种重置.
我有时会用它来覆盖background模板自定义中的先前规范,我想要以下内容:
background: white url(images/image1.jpg) top left repeat;
如下:
background: black;
因此,所有参数(background-image,background-position,background-repeat)将重置为默认值.
- 这是一个比较完整的答案,重置部分是非常重要的区别. (9认同)
l2a*_*lba 80
关于CSS性能:
backgroundvs background-color:
比较18个颜色样本在页面上呈现100次作为小矩形,一次使用背景,一次使用背景颜色.
虽然这些数字来自单页重新加载,随后刷新时渲染时间发生了变化,但每次的百分比差异基本相同.
在Safari 7.0.1中使用背景而不是背景颜色时,节省了近42.6毫秒,几乎快了两倍.Chrome 33似乎大致相同.
这真是让我感到震惊,因为最长的时间有两个原因:
- 我通常总是争论CSS属性的明确性,尤其是背景,因为它可能会对未来的特性造成不利影响.
- 我认为,当浏览器看到时
background: #000;,他们真的看到了background: #000 none no-repeat top center;.我这里没有资源的链接,但我记得在某处读过这篇文章.
参考: https ://github.com/mdo/css-perf#background-vs-background-color
- 我是来这里的 - 真的,*真的*对结果感到惊讶.谢谢你的回答. (11认同)
- @LeventDivilioglu正如测试人员所说:"这些测试都是作弊,并且总是在现实世界中有些不准确."https://github.com/mdo/css-perf#updated-conclusions-from-averages (4认同)
alp*_*nyx 23
有了background你可以设置所有background的属性,如:
background-colorbackground-image
background-repeatbackground-position
等等
有了background-color你可以指定背景的颜色
background: url(example.jpg) no-repeat center center #fff;
VS.
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
更多信息
(参见标题:背景 - 速记属性)
其中一个区别是:
如果您以这种方式使用图像作为背景:
background: url('Image Path') no-repeat;
那么你不能用"background-color"属性覆盖它.
但是,如果您使用背景来应用颜色,则它与背景颜色相同并且可以覆盖.
例如:http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/