背景:无vs背景:透明有什么区别？

Question

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

background: none;
background: transparent;

1. 它们都有效吗？
2. 应该使用哪一个？为什么？

Answer 1

它们之间没有区别.

如果没有background为作为简写的六个属性中的任何一个指定值,则将其设置为其默认值.none并且transparent是默认值.

一个显式设置background-imageto none并隐式设置background-colorto transparent.另一种是另一种方式.

Answer 2

作为关于@Quentin的附加信息,正如他正确地说的那样, backgroundCSS属性本身是一个简写:

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:noneVs 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;规范.

Answer 3

为了补充其他答案:如果要将所有背景属性重置为其初始值(包括background-color: transparent和background-image: none)而不显式指定任何值(如transparent或)none,则可以通过编写:

background: initial;