背景：无与背景：透明有啥区别？

Posted 2023-03-06

【中文标题】背景：无与背景：透明有啥区别？

【英文标题】：background:none vs background:transparent what is the difference?背景：无与背景：透明有什么区别？

【发布时间】：2014-01-14 01:51:37

【问题描述】：

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

background: none;
background: transparent;

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

【参考方案1】：

它们之间没有区别。

如果您没有为background 是其简写形式的六个属性中的任何一个指定值，则将其设置为其默认值。 none 和 transparent 是默认值。

将background-image 显式设置为none，并将background-color 隐式设置为transparent。另一个则相反。

【讨论】：

@herman — 不，他们不能。这与background-color: transparent; background-image: none; 相同。用户样式表可能会覆盖这些值中的一个或两个，但它会完全像 background-color: transparent; background-image: none; 已被明确写入一样。

那么，您是说“初始”属性值（用于未指定的属性）甚至会覆盖用户代理样式表？你有什么参考吗？

用户代理样式表实现规范，将这些属性的初始属性值定义为transparent 和none。

【参考方案2】：

作为 @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;您是说所有背景属性都设置为 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）

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

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 描述here

---

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

【讨论】：

谢谢回答背景图像，背景重复的默认值是什么......？他们依赖浏览器吗？如果我理解您的解释，最好使用 background:none 这样所有值都没有设置为默认值？

您尝试过您发布的内容吗？是否所有值都设置为无？检查此演示中的console jsfiddle.net/dnzy2/6

当你设置：背景：无；您是说所有背景属性都设置为无... 不是一种说法是错误的

+1，这必须是公认的答案（如果正确）。

根据 MDN，background-image 的初始值为none，所以background-image: none === background-image: initial，因此，background: none === background: transparent，我猜跨度>

【参考方案3】：

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

background: initial;

【讨论】：

注意，IE 不支持initial。见Can I Use和MDN