背景 | CSS-Tricks

CSS 中的 background 属性允许您控制任何元素的背景（在该元素的内容下方绘制的内容）。它是一个*简写*属性，这意味着它允许您在一个属性中编写多个 CSS 属性。像这样

body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

background 由其他八个属性组成

您可以按几乎任何顺序使用这些属性的任意组合（尽管规范中建议的顺序如上）。但是有一个问题：您在 background 属性中未指定的任何内容都会自动设置为其默认值。因此，如果您执行以下操作

body {
  background-color: red;
  background: url(sweettexture.jpg);
}

背景将是透明的，而不是红色。不过，修复起来很容易：只需在 background 之后定义 background-color，或者只使用简写形式（例如 background: url(...) red;）

多个背景

CSS3 增加了对多背景的支持，这些背景层叠在一起。与背景相关的任何属性都可以采用逗号分隔的列表，如下所示

body {
  background: url(sweettexture.jpg), url(texture2.jpg) black;
  background-repeat: repeat-x, no-repeat;
}

逗号分隔列表中的每个值对应一个图层：第一个值是顶层，第二个值是第二层，背景颜色始终是最后一层。

演示

浏览器支持

不同特定属性的支持程度有所不同，年鉴中的每一篇相关文章都有独特的浏览器支持说明。不过，基本的单色背景和单张图像在任何地方都有效，任何不受支持的内容都会回退到次优选项，无论是图像还是颜色。

IE	Edge	Chrome	Firefox	Safari	Opera
是	是	是	是	是	是

iOS	Chrome Android 版	Firefox Android 版	Android 浏览器	Opera Mobile
是	是	是	是	是

Rhys

# 2012年12月4日

是否值得更新本文以包含有关多背景图像的详细信息？

Chris Coyier

评论的永久链接# 2015年2月17日

完成！

Alex Bell

# 2012年12月11日

等等，不要忘记“center”也是 background-position 的一个可能值，因为你声称这是一个“完整的列表”。

Chris Coyier

评论的永久链接# 2015年2月17日

Background-position 在这里专门介绍：https://css-tricks.org.cn/almanac/properties/b/background-position/

Kathleen

# 2013年2月8日

根据 Rhys 的评论，我希望看到这篇文章更新为包含多背景图像、渐变和视网膜显示的内容。目前，我遇到了一个问题，虽然我可以在背景中使用多个图像，但我似乎只能设置一个 background-size。此外，在渐变上设置背景大小会导致渐变填充一半的空间（并且将颜色停止点设置为 200% 似乎没有任何作用）。这意味着，当设计师创建一个带有背景渐变和图标的按钮时，我必须创建多个具有背景图像的对象，而不是一个具有多个背景图像的对象。

Kathleen

评论的永久链接# 2013年2月8日

当然，在我发布上述评论后，我发现我可以使用多个 background-size（逗号分隔）。无论如何，最好在此处或在另一篇文章中包含该信息。
Khaki

评论的永久链接# 2019年6月21日

你可以在此处找到该信息

Wahib El Younssi

# 2014年7月24日

很好，但如果将这两个值加在一起，同时使用图像和颜色，那就更完美了

background: url (img/bg.png) repeat center #EEEEEE;

youl

# 2014年8月13日

哦，试试这个

body{
background: url(img.jpg) fixed;
-webkit-background-size: cover;
background-attachment: fixed;
}

Vinay Raghu

# 2015年3月6日

单独的背景大小需要在其前面加上斜杠。想知道为什么我的代码不起作用。过来检查一下。一切都好。谢谢！

Jules

# 2017年3月9日

是否可以将数据属性附加到 html 元素（例如 data-image），然后使用 CSS 使用类似 *attr(data-image)* 的内容将该图像用作背景？在我的情况下，我认为图像的选择是内容的一部分，但我无法让它正确显示。

subrata

# 2017年3月27日

这是一篇很棒的文章……关于背景的精彩写作……非常感谢你

Gaurav

# 2017年7月7日

如何添加与标题相同的背景？红色，带有白色线条轨迹！

匿名

评论的永久链接# 2017年9月11日

红色和白色线条是 svg。你可以通过检查访问它并按原样使用它。

MisterNeutron

# 2017年11月13日

可能值得指出的是，如果你的背景图像文件名包含任何空格，则需要用引号将 URL 引起来。

background: url("my dog.jpg")

Sandra

# 2018年2月19日

我们的 CSS 文件中有这个，我们的博客/页面背景是白色的，每页/博客都有紫色的边框（显然在后面）

body {
  background: #CCCCCC url(images/violet-fabric.gif);
  background: white;
}

我尝试上传一个纯白色的 .gif 文件，看看我们是否可以更改糟糕的紫色，但它没有改变。你能帮忙吗？

Geoff Graham

评论的永久链接# 2018年2月19日

嘿！你能从 'background' 属性中完全删除图像吗？

background: #cccccc;

另外，是否有可能还有其他元素正在使用紫色？如果是这样，你可能还需要从那里删除它。
Sandra

评论的永久链接# 2018年2月19日

非常感谢你回复我。我可以尝试完全删除该元素，看看会发生什么。据我所知，没有其他元素在使用这个 violet-fabric.gif，但在两个地方，css 使用了一个紫色的十六进制代码，这应该不会受到任何影响。

请原谅我的无知，为什么那行代码前面有 //？（我对这一切都很陌生，正在边做边学）
Geoff Graham

评论的永久链接# 2018年2月19日

那些 '//' 意味着该属性已被注释掉，不会被渲染。如果删除它们，该属性将包含在代码中。

……但这又引出了另一个问题：你是在编辑 CSS 文件还是其他类型的文件？这种类型的注释格式被 Sass (.scss)、Less (.less) 或其他 CSS 预处理器使用。

Pedro Monteiro

# 2019年10月25日

大家好，我需要让背景变暗，但不能单独做到这一点（只能使背景图像变暗，而不能使里面的内容变暗）

.body__header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-area: valtech;
  background: url(/dist/img/Lagoa.jpg) no-repeat center center/cover;
  border-radius: 10px;
  text-align: center;
  // filter: brightness(98%);
  // filter: grayscale(45%);
  height: 55vh;
  width: 100%;
}

多个背景

演示

浏览器支持

评论

发表评论 取消回复

发表评论取消回复