背景: 无对背景: 透明有什么区别?

是否有 区别这两个 CSS 属性:

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

他们之间没有区别。

如果您没有为 background作为简写的六个属性中的任何一个指定值,那么它将被设置为其默认值。nonetransparent是默认值。

一种是显式地将 background-image设置为 none,并隐式地将 background-color设置为 transparent。另一个是反过来的。

作为 @ Quentin的补充信息,正如他所说, 属性本身,是:

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 transparentnone在这种情况下是相同的,所以在你的例子和你原来的问题,没有,他们之间没有区别。

但是!..如果你说 background:none Vs background:red,那么是的... 有一个很大的区别,就像我说的,第一个将所有的属性设置为 none/default,而第二个,将只改变 color,并保持其余的在他的 default状态。

简而言之:

简短的回答 : 不,根本没有区别(在你的例子和最初的问题中)
长回答 : 是的,有很大的区别,但是直接取决于授予属性的属性。


Upd1: 初始值(又名 default)

初始值它的经手属性的初始值的串联:

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;