CSS 背景：无与背景：透明有什么区别？

background:none vs background:transparent what is the difference?

提问by web-tiki

Is there a difference betweenthese two CSS properties:

这两个 CSS 属性之间有区别吗：

background: none;
background: transparent;

1. Are they both valid?
2. Which one should be used and why?

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

采纳答案by Quentin

There is no difference between them.

它们之间没有区别。

If you don't specify a value for any of the half-dozen properties that backgroundis a shorthand for, then it is set to its default value. noneand transparentare the defaults.

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

One explicitly sets the background-imageto noneand implicitly sets the background-colorto transparent. The other is the other way around.

一个显式设置background-imagetonone和隐式设置background-colorto transparent。另一种是反过来。

回答by gmo

As aditional information on @Quentinanswer, and as he rightly says, backgroundCSS property itself, is a shorthand for:

作为@Quentin回答的附加信息，正如他所说的那样， backgroundCSS 属性本身是以下内容的简写：

background-color
background-image
background-repeat
background-attachment
background-position

That's mean, you can group all styles in one, like:

这意味着，您可以将所有样式组合为一个，例如：

background: red url(../img.jpg) 0 0 no-repeat fixed;

This would be (in this example):

这将是（在本例中）：

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

So... when you set: background:none;
you are saying that all the background properties are set to none...
You are saying that background-image: none;and all the others to the initialstate (as they are not being declared).
So, background:none;is:

所以......当你设置：background:none;
你是说所有的背景属性都被设置为无......
你是说background-image: none;所有其他属性都被设置为initial状态（因为它们没有被声明）。
所以，background:none;是：

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Now, when you define only the color (in your case transparent) then you are basically saying:

现在，当您仅定义颜色（在您的情况下transparent）时，您基本上是在说：

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

I repeat, as @Quentin rightly saysthe defaulttransparentand nonevalues in this caseare the same, so in your example and for your original question, No, there's no difference between them.

我再说一遍，因为@Quentin说得好的defaulttransparent和none值在这种情况下是相同的，所以在你的例子和你原来的问题，没有，有没有差别。

But!.. if you say background:noneVs background:redthen yes... there's a big diference, as I say, the first would set all properties to none/defaultand the second one, will only change the colorand remains the rest in his defaultstate.

但是！.. 如果你说background:noneVsbackground:red那么是的......有一个很大的不同，正如我所说，第一个将所有属性设置none/default为第二个，只会改变color并保持其余的default状态。

So in brief:

简而言之：

Short answer: No, there's no difference at all (in your example and orginal question)
Long answer: Yes, there's a big difference, but depends directly on the properties granted to attribute.

简短回答：不，根本没有区别（在您的示例和原始问题中）
长回答：是的，有很大区别，但直接取决于授予属性的属性。

---

---

Upd1: Initial value (aka default)

Upd1：初始值（又名default）

Initial value the concatenation of the initial values of its longhand properties:

Initial value 其普通属性的初始值的串联：

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

See more backgrounddescriptions here

在此处查看更多background说明

---

---

Upd2: Clarify better the background:none;specification.

Upd2：更好地阐明background:none;规范。

回答by herman

To complement the other answers: if you want to reset all background properties to their initial value (which includes background-color: transparentand background-image: none) without explicitly specifying any value such as transparentor none, you can do so by writing:

补充其他答案：如果您想将所有背景属性重置为其初始值（包括background-color: transparent和background-image: none）而不明确指定任何值，例如transparentor none，您可以通过编写：

background: initial;