背景:无vs背景:透明
这两个CSS属性是否有区别 :
background: none; background: transparent;
- 他们都有效吗?
- 哪一个应该使用, 为什么 ?
他们之间没有区别。
如果您没有为background
为速记的任何一种属性指定一个值,则将其设置为默认值。 none
和transparent
是默认值。
一个显式设置background-image
为none
并隐式设置background-color
为transparent
。 另一种是相反的方式。
作为@Quentin的附加信息,正如他所说的, background
CSS属性本身就是一个简写:
background-color background-image background-repeat background-attachment background-position
这意味着,您可以将所有样式分组在一起,例如:
background: red url(../img.jpg) 0 0 no-repeat fixed;
这将是(在这个例子中):
background-color: red; background-image: url(../img.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0;
所以…当你设置: background:none;
你说所有的背景属性都设置为无 …
你说的background-image: none;
和所有其他人的initial
状态(因为他们没有被宣布)。
所以, background:none;
是:
background-color: initial; background-image: none; background-repeat: initial; background-attachment: initial; background-position: initial;
现在,当你只定义颜色(在你的情况下transparent
),那么你基本上是说:
background-color: transparent; background-image: initial; background-repeat: initial; background-attachment: initial; background-position: initial;
我再说一遍, 作为@Quentin正确地说 default
transparent
和在这种情况下 none
值是相同的,所以在你的例子和你原来的问题,不,他们之间没有任何区别。
但是,如果你说background:none
background:red
然后是…有一个很大的差异,正如我所说,第一个将设置所有属性为none/default
,第二个,只会改变color
并保持其余的处于default
状态。
简而言之:
简答 :不,根本没有区别(在你的例子和原始问题)
长答案 :是的,有很大的区别,但直接取决于属性授予的属性。
Upd1:初始值(又名default
)
初始值是其longhand属性初始值的连接:
background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties background-clip: border-box background-color: transparent
在这里查看更多background
说明
Upd2:澄清更好的background:none;
规范。
为了补充其他的答案:如果你想重置所有的背景属性到它们的初始值(其中包括background-color: transparent
和background-image: none
),没有明确指定任何值,如transparent
或none
,你可以通过写:
background: initial;