CSS 背景

CSS 背景属性

CSS 背景属性允许你控制元素的背景效果，包括颜色、图像、重复方式、附件方式和位置。掌握这些属性是创建视觉吸引力设计的关键。

核心 CSS 背景属性包括：

background-color
background-image
background-repeat
background-attachment
background-position
background-size (CSS3)
background-origin (CSS3)
background-clip (CSS3)
以及简写属性 background。

`background-color`

background-color 属性设置元素的背景颜色。颜色可以使用颜色名称、HEX 值、RGB(A) 值或 HSL(A) 值来指定。

设置页面背景颜色的示例：

body {
  background-color: #f0f8ff; /* 浅蓝色 */
}

/* 不同元素具有不同的背景颜色 */
h1 {
  background-color: cornflowerblue;
  color: white; /* 确保文本可读 */
  padding: 10px;
}

div.content-box {
  background-color: rgba(255, 228, 196, 0.5); /* 陶坯黄，透明度 50% */
  padding: 15px;
}

始终确保文本颜色和背景颜色之间有足够的对比度，以提高可访问性。

`background-image`

background-image 属性为一个元素设置一个或多个背景图像。图像使用 url() 函数指定。

默认情况下，背景图像放置在左上角并重复以覆盖整个元素。

body {
  background-image: url("paper_texture.png");
}

.hero-section {
  background-image: url("landscape.jpg");
  /* 可能需要其他背景属性，如大小、位置、重复方式 */
  height: 400px; /* 确保 div 有高度以显示背景 */
  color: white;
  text-shadow: 1px 1px 2px black; /* 提高图片上文本的可读性 */
}

你还可以使用渐变作为背景图像：

.gradient-box {
  background-image: linear-gradient(to right, red, yellow);
  height: 100px;
}

`background-repeat`

background-repeat 属性控制背景图像是否重复以及如何重复。

repeat：图像在水平和垂直方向上重复（默认）。
repeat-x：图像仅在水平方向上重复。
repeat-y：图像仅在垂直方向上重复。
no-repeat：图像不重复（只显示一次）。
space：图像尽可能多地重复而不会被裁剪，空间均匀分布。
round：图像重复并缩放以填充空间，没有间隙或裁剪。

示例：一个应仅在水平方向重复的水平渐变图案：

.header {
  background-image: url("horizontal_pattern.png");
  background-repeat: repeat-x;
  height: 50px;
}

`background-position`

background-position 属性设置背景图像的初始位置。如果 background-repeat 是 no-repeat，则此属性决定单个图像的放置位置。

值可以是关键字（例如 top、center、bottom、left、right）、百分比或长度单位。

.icon-box {
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: center center; /* 图标居中 */
  padding-left: 30px; /* 如果同时存在文本，为图标留出空间 */
  height: 50px;
}

.custom-position {
  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-position: right 10px top 20px; /* 距离右侧 10px，距离顶部 20px */
}

`background-attachment`

background-attachment 属性决定背景图像是随页面其余内容滚动还是固定。

scroll：背景图像随页面滚动（默认）。
fixed：背景图像相对于视口固定；它不随其包含元素滚动。
local：背景图像随元素的内容滚动。如果元素有滚动条，背景会随滚动内容移动。

示例：使用固定背景创建视差效果：

body {
  background-image: url("large_scenery.jpg");
  background-attachment: fixed;
  background-size: cover; /* 通常与固定附件一起使用 */
  background-position: center center;
}

`background-size` (CSS3)

background-size 属性指定背景图像的大小。

auto：图像保持其原始大小（默认）。
<length> 或 <percentage>：例如，100px 50px 或 50% 25%（宽度高度）。
cover：缩放图像（保持宽高比）使其尽可能大，以完全覆盖背景区域。图像的某些部分可能会被裁剪。
contain：缩放图像（保持宽高比）使其尽可能大，同时确保整个图像在背景区域内可见。

.full-bg {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* 全视口高度 */
}

简写属性 `background`

为了缩短代码，你可以将所有单个背景属性在一个 background 属性中指定。

简写属性值的通用顺序是：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip];

注意 background-size 前的 /。如果指定了 background-size，它必须放在 background-position 之后，并用 / 分隔。

示例：

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

.advanced-bg {
  background: lightblue url("flowers.jpg") no-repeat center center / cover fixed;
}

你不需要包含所有值。对于未指定的值，浏览器将使用默认值。但是，如果多个值可以被解释为不同属性（例如，颜色与位置关键字），则顺序很重要。

多个背景图像 (CSS3)

CSS3 允许你通过逗号分隔 background-image 和其他相关属性的值来为一个元素指定多个背景图像。列出的第一个图像离用户最近（在最上面）。

.multi-bg {
  background-image: url("foreground.png"), url("middle-pattern.svg"), url("far-background.jpg");
  background-repeat: no-repeat, repeat-x, no-repeat;
  background-position: top left, center, bottom right;
  background-size: 50px, auto, cover;
  height: 300px;
  border: 1px solid;
}

或者使用简写：

.multi-bg-shorthand {
  background:
    url("fg.png") no-repeat top left / 50px,
    url("pattern.svg") repeat-x center / auto,
    url("bg.jpg") no-repeat bottom right / cover #eee;
  height: 300px;
  border: 1px solid;
}

所有 CSS 背景属性参考

属性	描述
`background`	在一个声明中设置所有背景属性的简写。
`background-attachment`	设置背景图像是固定还是随页面/元素内容滚动。
`background-blend-mode`	指定元素的背景图像应如何相互融合以及与元素的背景颜色融合。
`background-clip`	定义背景（颜色或图像）在元素内的扩展范围。值：`border-box`、`padding-box`、`content-box`。
`background-color`	设置元素的背景颜色。
`background-image`	为一个元素设置一个或多个背景图像。
`background-origin`	指定背景图像的起始位置。值：`padding-box`、`border-box`、`content-box`。
`background-position`	设置背景图像的起始位置。
`background-repeat`	设置背景图像是否重复以及如何重复。
`background-size`	指定背景图像的大小。

CSS 背景

CSS 背景属性

background-color

background-image

background-repeat

background-position

background-attachment

background-size (CSS3)

简写属性 background