CSS背景怎么设置_CSS背景属性使用教程

蓮花仙者

发布时间：2025-09-14 23:06:01

1305人浏览过

来源于php中文网

原创

答案：CSS背景设置通过background系列属性控制颜色、图片、重复、位置、大小和滚动方式，可使用简写属性统一管理。具体包括：background-color设置纯色背景；background-image指定背景图片；background-repeat控制图片重复方式（如no-repeat、repeat-x等）；background-position定义图片在元素中的起始位置（支持关键词、百分比或像素值）；background-size调整图片尺寸，cover保持比例并覆盖整个区域（可能裁剪），contain完整显示图片（可能留白），也可用百分比或具体数值；background-attachment决定图片是否随页面滚动（fixed实现固定背景）；最后，background简写属性可合并所有子属性，顺序为颜色、图片、重复、附件、位置/大小、滚动方式，其中background-size需与position用斜杠分隔。使用简写时需注意未声明的属性会被重置为默认值，易导致意外覆盖，建议复杂场景分开书写以提高可读性和维护性。典型应用如全屏居中固定背景采用background-image配合fixed、center center和cover；响应式设计中优先选用cover或contain结合居中策略平衡视觉效果与完整性，必要时辅以媒体查询优化不同屏幕表现。

css背景怎么设置_css背景属性使用教程

CSS背景的设置，核心就是围绕

background

这一系列属性展开，它允许我们控制元素的背景颜色、背景图片、图片重复方式、位置以及大小等等。掌握这些属性，就能让你的网页在视觉上焕然一新，无论是简单的纯色背景，还是复杂的图片排版，都能轻松实现。

解决方案

要设置CSS背景，我们主要会用到以下几个关键属性，当然，最终它们也能通过一个强大的简写属性

background

来统一管理。

background-color

：背景颜色 这是最基础的，用来给元素填充一个纯色背景。你可以使用颜色名称（如

red

）、十六进制值（如

#ff0000

）、RGB值（如

rgb(255,0,0)

）或RGBA值（如

rgba(255,0,0,0.5)

，带有透明度）。

body {
    background-color: #f0f0f0; /* 给整个页面一个浅灰色背景 */
}

.card {
    background-color: rgb(255, 255, 255); /* 给卡片一个白色背景 */
}

background-image

：背景图片 如果你想用图片作为背景，就用这个属性。通常需要指定图片的URL。

.hero-section {
    background-image: url('images/hero-bg.jpg'); /* 设置一个英雄区域的背景图 */
}

值得注意的是，如果图片加载失败，

background-color

会作为备用背景色显示出来，这是个不错的实践。

background-repeat

：背景图片重复方式 默认情况下，背景图片会在水平和垂直方向上平铺，直到铺满整个元素。这个属性可以控制它的重复行为。

```
no-repeat
```
：图片只显示一次。
```
repeat-x
```
：图片只在水平方向重复。
```
repeat-y
```
：图片只在垂直方向重复。
```
repeat
```
（默认值）：图片在水平和垂直方向都重复。
```
space
```
：图片会均匀分布，不裁剪，如果空间不足会留白。
```
round
```
：图片会缩放以适应空间，不留白。

.pattern-bg {
    background-image: url('images/pattern.png');
    background-repeat: repeat-x; /* 只在水平方向重复 */
}

.single-icon {
    background-image: url('images/icon.png');
    background-repeat: no-repeat; /* 图标只显示一次 */
}

background-position

：背景图片位置 这个属性决定了背景图片在元素内的起始位置。你可以使用关键词（如

top

、

center

、

bottom

、

left

、

right

）、百分比（如

50% 50%

表示居中）或具体的像素值（如

10px 20px

）。第一个值是水平位置，第二个是垂直位置。

.centered-bg {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-position: center center; /* 图片在元素中水平垂直居中 */
}

.offset-bg {
    background-image: url('images/decoration.png');
    background-repeat: no-repeat;
    background-position: 20px 30px; /* 图片距离左上角20px（水平）30px（垂直） */
}

background-size

：背景图片大小 这属性控制背景图片的大小。我个人觉得这是最灵活也最容易让人迷惑的属性之一。

```
auto
```
（默认值）：保持图片原始尺寸。
```
cover
```
：图片会被缩放，以完全覆盖背景区域，可能会裁剪图片的一部分。我个人比较喜欢用它，因为它能让图片尽可能铺满，视觉效果通常比较好。
```
contain
```
：图片会被缩放，以完全适应背景区域，图片完整显示，可能会留白。
具体尺寸：如
```
200px 150px
```
，第一个值是宽度，第二个是高度。
百分比：如
```
50% 100%
```
，相对于元素自身的宽度和高度。

.full-screen-bg {
    background-image: url('images/large-bg.jpg');
    background-size: cover; /* 覆盖整个区域，可能裁剪 */
    background-position: center center; /* 确保居中裁剪 */
}

.thumbnail-bg {
    background-image: url('images/product.png');
    background-size: contain; /* 完整显示图片，可能留白 */
    background-repeat: no-repeat;
    background-position: center center;
}

background-attachment

：背景图片滚动方式 这个属性决定了背景图片是随页面滚动还是固定不动。

```
scroll
```
（默认值）：背景图片随页面内容一起滚动。
```
fixed
```
：背景图片固定在视口中，不随页面滚动。
```
local
```
：背景图片随元素内容一起滚动（如果元素自身有滚动条）。

.parallax-section {
    background-image: url('images/parallax.jpg');
    background-attachment: fixed; /* 制造视差滚动效果 */
    background-size: cover;
    background-position: center center;
}

background

：背景属性简写 这是所有

background-*

属性的集合，可以让你在一行代码中设置多个背景属性。它的顺序通常是：

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

注意，

background-size

必须跟在

background-position

后面，并用

分隔。如果省略某个值，它会使用默认值。

.shorthand-bg {
    background: #e0e0e0 url('images/pattern.png') no-repeat center / cover fixed;
    /* 颜色、图片、不重复、居中、覆盖、固定 */
}

说实话，刚开始学CSS的时候，背景这块儿我总是搞不清楚，尤其是

background-position

和

background-size

，感觉怎么调都不对劲。但一旦理解了它们各自的作用，以及简写属性的强大，效率真的能提升不少。不过，简写属性虽然方便，有时候为了调试或提高代码可读性，我也会选择把一些关键属性分开写，这完全取决于具体场景和个人习惯。

立即学习“前端免费学习笔记（深入）”；

背景图片固定不滚动，还能完美居中显示？

当然可以，这是网页设计中很常见的一种需求，尤其是在制作一些全屏背景或者视差滚动效果时。要实现背景图片固定在视口中不随页面滚动，同时还要完美居中显示，我们需要组合使用

background-attachment

、

background-position

和

background-size

这几个属性。

核心思路是：

固定背景： 使用
```
background-attachment: fixed;
```
。这会让背景图片固定在浏览器视口上，即使页面内容滚动，背景图片也纹丝不动。
图片居中： 使用
```
background-position: center center;
```
。这确保了图片在元素的水平和垂直方向上都居中。
覆盖整个区域： 使用
```
background-size: cover;
```
。这样图片会缩放以完全覆盖元素（通常是整个视口），避免出现空白区域，即使图片尺寸与元素不完全匹配，也能保持良好的视觉效果。

body {
    background-image: url('images/fixed-bg.jpg'); /* 你的背景图片 */
    background-repeat: no-repeat; /* 确保图片不重复 */
    background-attachment: fixed; /* 图片固定，不随滚动条移动 */
    background-position: center center; /* 图片水平垂直居中 */
    background-size: cover; /* 图片覆盖整个背景区域 */
    /* 额外：如果图片有透明度，下面的颜色会透出来 */
    background-color: #333;
}

通过这种组合，无论用户如何滚动页面，那张背景图片都会像被“钉”在屏幕上一样，始终保持居中并铺满整个视口，营造出一种沉浸式的体验。我发现很多着陆页（landing page）和作品集网站都喜欢用这种方式来提升视觉冲击力。

如何让背景图片自适应屏幕大小，避免拉伸或裁剪失真？

让背景图片自适应屏幕大小，同时尽量避免拉伸或裁剪失真，这确实是一个挑战，因为“完美”通常意味着在视觉效果和图片完整性之间找到一个平衡点。这里主要涉及到

background-size

属性的巧妙运用，以及对不同场景的权衡。

background-size: cover;

：优先覆盖，裁剪可接受 这是最常用的方式，也是我个人在做全屏背景时首选的方案。它会确保图片始终覆盖整个背景区域，即使这意味着图片的一部分可能会被裁剪掉。它的好处是，你永远不会看到背景区域有空白，视觉上非常饱满。缺点是，如果图片的重要内容（比如人脸、关键文字）恰好在边缘，可能会被裁掉。为了减少这种“失真”感，通常会配合

background-position: center center;

使用，让图片的重要部分（中心区域）尽量保留。

.responsive-cover {
    background-image: url('images/wide-image.jpg');
    background-repeat: no-repeat;
    background-position: center center; /* 确保图片中心对齐元素中心 */
    background-size: cover; /* 覆盖整个区域，可能会裁剪边缘 */
}

background-size: contain;

：优先完整，留白可接受 如果你的背景图片内容非常重要，不能有任何裁剪，那么

contain

就是你的选择。它会缩放图片，使其完全适应背景区域，但如果图片与元素的宽高比不一致，就会在边缘留下空白区域。这些空白区域通常需要用

background-color

来填充，或者通过其他设计元素来弥补。

.responsive-contain {
    background-image: url('images/logo-icon.png');
    background-repeat: no-repeat;
    background-position: center center; /* 确保图片居中 */
    background-size: contain; /* 完整显示图片，可能会留白 */
    background-color: #eee; /* 用颜色填充留白区域 */
}

3. 百分比或具体尺寸：精准控制，但响应性差 你可以用百分比（如

background-size: 100% auto;

）或像素值来设置背景大小。

```
100% auto;
```
：宽度100%，高度自动等比例缩放。这对于图片宽度需要与元素宽度一致，但高度随比例变化的情况很有用。
```
auto 100%;
```
：高度100%，宽度自动等比例缩放。
```
100% 100%;
```
：宽度和高度都拉伸到100%。这几乎一定会导致图片失真，因为图片会被强制拉伸到与元素完全匹配，除非图片本身的宽高比就和元素一样。我一般不推荐这种方式，除非你的图片本身就是抽象图案，失真不明显。

.full-width-bg {
    background-image: url('images/banner.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto; /* 宽度100%，高度等比例缩放 */
    background-position: center top;
}

我的经验之谈： 在实际项目中，我发现大部分情况下

background-size: cover

配合

background-position: center center

是最通用且视觉效果最好的方案。如果图片内容真的不能裁剪，我会考虑用

@@##@@

标签来插入图片，然后通过CSS来控制其响应式行为，因为

@@##@@

标签在处理图片完整性和可访问性方面有其优势。另外，对于某些极端情况，你可能需要结合媒体查询（

@media

）来为不同屏幕尺寸提供不同的背景图片或

background-size

值，以达到最佳效果。

CSS背景属性简写：效率与陷阱，你真的了解吗？

CSS的

background

简写属性无疑是提高编码效率的利器，它允许你在一个声明中设置多个背景相关的属性，让代码看起来更简洁。但就像任何强大的工具一样，它也有其“陷阱”或者说需要注意的地方。

简写的优势：

代码简洁： 最直观的优势就是减少了代码行数。原本需要写好几行的属性，现在一行搞定。

晓象AI资讯阅读神器

晓象-AI时代的资讯阅读神器

下载

/* 冗长版 */
.element {
    background-color: #f0f0f0;
    background-image: url('bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* 简写版 */
.element {
    background: #f0f0f0 url('bg.png') no-repeat center / cover fixed;
}

提高开发效率： 减少了打字量，自然也就加快了开发速度。
统一管理： 所有背景相关的设置都集中在一处，方便查阅和修改。

简写属性的顺序和“陷阱”：

background

简写属性的顺序通常是：

[background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size]

这里有几个需要注意的点：

```
background-size
```
必须跟在
background-position
后面，并用
/
分隔。这是最常见的语法错误之一。如果你只写了
```
center cover
```
，CSS会把它解析成
```
background-position: center cover
```
，这显然不是你想要的。正确的是
```
center / cover
```
。
省略的值会重置为默认值。 这是一个非常重要的“陷阱”。如果你只写了
```
background: url('bg.png');
```
，那么除了
```
background-image
```
被设置为
```
url('bg.png')
```
之外，其他所有
```
background-*
```
属性（如
```
background-color
```
,
```
background-repeat
```
,
```
background-position
```
等）都会被重置为它们的默认值。这意味着如果你之前在其他地方设置了
```
background-repeat: repeat-x;
```
，然后用简写只设置了图片，那么
```
repeat-x
```
就会被
```
repeat
```
（默认值）覆盖掉。
```
.my-div {
    background-color: red;
    background-repeat: no-repeat;
}

/* 稍后在代码中 */
.my-div {
    background: url('image.png'); /* 陷阱！background-color会被重置为transparent，background-repeat会被重置为repeat */
}
```
所以，在使用简写时，要么确保你明确知道所有默认值，要么就一次性把所有需要的属性都写进去。
多背景图片： 简写属性也支持设置多背景图片，用逗号分隔。
```
.multi-bg {
    background: url('bg1.png') no-repeat top left,
                url('bg2.png') repeat-x bottom center,
                #f0f0f0; /* 最后一个可以是颜色 */
}
```
这种情况下，每个背景图片及其相关属性（除了
```
background-color
```
，它只作用于最底层）都用逗号分隔开。

我的使用建议：

对于简单的、明确的背景设置，比如一个纯色背景或者一个不重复的居中图片，简写属性非常好用。
如果你的背景设置比较复杂，或者你需要在不同地方逐步修改背景属性，那么分开写可能会更清晰，避免意外覆盖。
在团队协作中，如果团队有明确的编码规范，就按照规范来。如果没有，我通常会建议在简写时尽量写全所有相关属性，即使有些是默认值，这样可以避免阅读者产生歧义，也避免了未来修改时可能出现的覆盖问题。

总的来说，