背景:无vs背景:透明

这两个CSS属性是否有区别

background: none; background: transparent; 
  1. 他们都有效吗?
  2. 哪一个应该使用, 为什么

他们之间没有区别。

如果您没有为background为速记的任何一种属性指定一个值,则将其设置为默认值。 nonetransparent是默认值。

一个显式设置background-imagenone并隐式设置background-colortransparent 。 另一种是相反的方式。

作为@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: transparentbackground-image: none ),没有明确指定任何值,如transparentnone ,你可以通过写:

 background: initial;