CSS背景怎么设置_CSS背景属性使用教程
|
5
|
web前端

3594 字
|
14 分钟

答案：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

来统一管理。

1. 

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); /* 给卡片一个白色背景 */ }

2. 

background-image

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

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

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

background-color

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

3. 

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; /* 图标只显示一次 */ }

4. 

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（垂直） */ }

5. 

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; }

6. 

background-attachment

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

  • scroll

    （默认值）：背景图片随页面内容一起滚动。

  • fixed

    ：背景图片固定在视口中，不随页面滚动。

  • local

    ：背景图片随元素内容一起滚动（如果元素自身有滚动条）。

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

7. 

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

这几个属性。

核心思路是：

  1. 固定背景： 使用 
    background-attachment: fixed;

    。这会让背景图片固定在浏览器视口上，即使页面内容滚动，背景图片也纹丝不动。

  2. 图片居中： 使用 
    background-position: center center;

    。这确保了图片在元素的水平和垂直方向上都居中。

  3. 覆盖整个区域： 使用 
    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

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

1. 

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; /* 覆盖整个区域，可能会裁剪边缘 */ }

2. 

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

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

<img>

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

<img>

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

@media

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

background-size

值，以达到最佳效果。

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

CSS的

background

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

简写的优势：

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

    /* 冗长版 */ .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; }

  2. 提高开发效率： 减少了打字量，自然也就加快了开发速度。

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

    无限画

    千库网旗下AI绘画创作平台

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

    查看详情 CSS背景怎么设置_CSS背景属性使用教程

  3. 统一管理： 所有背景相关的设置都集中在一处，方便查阅和修改。

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

background

简写属性的顺序通常是： 

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

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

  1. background-size

    必须跟在

    background-position

    后面，并用

    /

    分隔。 这是最常见的语法错误之一。如果你只写了

    center cover

    ，CSS会把它解析成

    background-position: center cover

    ，这显然不是你想要的。正确的是

    center / cover

    。

  2. 省略的值会重置为默认值。 这是一个非常重要的“陷阱”。如果你只写了

    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 */ }

    所以，在使用简写时，要么确保你明确知道所有默认值，要么就一次性把所有需要的属性都写进去。

  3. 多背景图片： 简写属性也支持设置多背景图片，用逗号分隔。

    .multi-bg {     background: url('bg1.png') no-repeat top left,                 url('bg2.png') repeat-x bottom center,                 #f0f0f0; /* 最后一个可以是颜色 */ }

    这种情况下，每个背景图片及其相关属性（除了

    background-color

    ，它只作用于最底层）都用逗号分隔开。

我的使用建议：

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

总的来说，

background

简写属性是CSS中一个非常实用的功能，它能让你的代码更精炼。但前提是你需要清楚地理解它的工作原理，尤其是它对未指定属性的默认值重置行为，这样才能扬长避短，真正发挥它的效率优势。

css教程 css go 浏览器 工具 ai 响应式设计 代码可读性 垂直居中 red css auto position background

go
上一篇
下一篇

推荐文章

如何解决电商分类搜索筛选器混乱的问题，SprykerProductCategoryFilter助你精准掌控用户体验
Golangerrors包错误创建与链式处理方法
GolangWeb会话持久化与存储实现
如何为VSCode编写自己的扩展插件并发布到市场？
使用 filepath.Walk 函数时出现 panic 的原因及解决方法
使用 filepath.Walk 时出现 panic 的原因及解决方案
欧易(OKE)网页端注册链接 欧易官方注册平台入口
将字符串转换为整数 (并处理转换失败的情况)
Linux如何检测网络丢包和延迟
欧易OKE交易所官方注册入口