CSS设置背景 - 技术栈

写在前面

大家好，我是一溪风月🤖，在网页开发的世界里，背景就像是舞台的幕布，虽不总是最引人瞩目的焦点，但却对整体视觉效果起着至关重要的作用。合理运用CSS设置背景，能让网页从平淡无奇变得魅力十足。今天，咱们就来深入探究一下CSS中背景相关属性的奥秘。

一.认识网页背景

在开发网页时，为了提升美观度，我们常常会对网页背景进行各式各样的设置。此前，我们已经掌握了设置背景颜色的方法，现在将进一步学习背景设置的更多知识。网页背景不仅能美化页面，还能营造特定的氛围，引导用户的视觉焦点，让用户在浏览网页时获得更好的体验。

二.background-image：添加背景图片

background-image属性用于为元素设置背景图片。使用方法很简单，在CSS中，通过以下代码为一个<div>元素添加背景图片：

css 复制代码

div {
  background-image: url('example.jpg');
}

这里需要注意两个关键要点：

层叠顺序 ：背景图片会盖在background-color之上。也就是说，如果同时设置了背景颜色和背景图片，背景颜色会成为图片的底色，而图片会显示在上面。当设置了多张背景图片时，第一张图片会显示在最上层，其余图片按顺序依次层叠在下方。

元素尺寸：如果设置背景图片的元素没有具体的宽度和高度，背景图片是不会显示出来的。因为图片需要有一个确定的空间来展示，就像一幅画需要挂在墙上，墙得有一定的面积才行。

三.background-repeat：控制背景图片平铺

background-repeat属性用于决定背景图片是否平铺以及如何平铺。它常见的取值有：

repeat：默认值，图片会在水平和垂直方向上平铺，直到铺满整个元素。比如，我们想要用一张小的花纹图片铺满整个页面背景，可以这样设置：

css 复制代码

body {
  background-image: url('pattern.jpg');
  background-repeat: repeat;
}

no-repeat：图片不会平铺，仅显示一次。当你希望在页面某个角落展示一个独特的图标时，就可以用这个属性：

css 复制代码

.icon {
  background-image: url('icon.png');
  background-repeat: no-repeat;
}

repeat-x：图片只在水平方向上平铺。常用于制作水平条纹背景：

css 复制代码

.stripe {
  background-image: url('stripe.png');
  background-repeat: repeat-x;
}

repeat-y：图片只在垂直方向上平铺。比如设置一个垂直的纹理背景：

css 复制代码

.vertical-bg {
  background-image: url('vertical-pattern.png');
  background-repeat: repeat-y;
}

四.background-size：调整背景图片大小

background-size属性能够设置背景图片的大小，它有多种取值方式：

auto：这是默认值，图片会以自身原本的大小显示。如果图片本身尺寸较大，在小元素中可能无法完整显示。
cover：缩放背景图片，使其完全覆盖铺满元素。在这个过程中，可能会有部分图片超出元素范围而看不见，但能保证元素被完全覆盖。常用于制作全屏背景图：

css 复制代码

.fullscreen-bg {
  background-image: url('landscape.jpg');
  background-size: cover;
}

contain：缩放背景图片，让图片的宽度或高度铺满元素，同时保持图片的宽高比。这样能确保图片完整显示，但元素可能不会被完全覆盖：

css 复制代码

.container {
  background-image: url('product.jpg');
  background-size: contain;
}

<percentage>：以百分比的形式设置图片大小，相对于背景区（background positioning area）。比如background-size: 50% 50%;表示图片宽度和高度都为背景区的50%。
length：使用具体的数值，如100px来设置图片大小。background-size: 200px 100px;表示图片宽度为200px，高度为100px。

五.background-position：定位背景图片

background-position属性用于设置背景图片在元素内水平和垂直方向上的具体位置。它可以设置具体的数值，也可以使用关键词：

具体数值 ：例如background-position: 20px 30px;，表示图片在水平方向距离元素左边界20px，垂直方向距离元素上边界30px的位置。

关键词 ：水平方向可取值left（左对齐）、center（居中对齐）、right（右对齐）；垂直方向可取值top（顶部对齐）、center（居中对齐）、bottom（底部对齐）。比如background-position: center bottom;表示图片在水平方向居中，垂直方向底部对齐。

单方向设置 ：如果只设置了一个方向的值，另一个方向默认是center。如background-position: 50px;等同于background-position: 50px center;。

六.background-attachment：固定背景图像

background-attachment属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动，有以下3个取值：

scroll：背景相对于元素本身固定，不会随着元素内容滚动。比如一个有滚动条的div元素，背景会固定在div内，内容滚动时背景不动。

css 复制代码

.scrollable-div {
  background-image: url('bg.jpg');
  background-attachment: scroll;
  height: 200px;
  overflow: auto;
}

local：背景相对于元素的内容固定。如果元素有滚动机制，背景会随着内容一起滚动。例如一个很长的文章区域，背景图片会随着文字的滚动而滚动，仿佛与内容融为一体。
fixed：背景相对于视口固定。即使元素有滚动机制，背景也不会随着元素内容滚动，始终保持在视口的固定位置。常用于制作视差效果，让背景和内容有不同的滚动速度，增强页面的层次感。

七.background：背景属性简写

background是一个简写属性，它可以将一系列背景相关属性合并在一起。常用格式如下：

css 复制代码

background: [ <bg-layer>,]<final-bg-layer>;
where
<bg-layer>=<image> <position>/<size> <repeat-style> <attachment> <box> <box>;
<final-bg-layer>=<background-color> | <image> <position>/<size> <repeat-style> <attachment> <box> <box>;

在使用时，background-size如果不省略，必须紧跟在background-position后面。其他属性都可以省略，而且顺序任意。例如：

css 复制代码

body {
  background: url('bg.jpg') center/cover no-repeat fixed;
}

这段代码同时设置了背景图片、位置、大小、平铺方式和固定方式，让代码更加简洁明了。

八.background-image和img对比

在开发中，background-image和<img>标签都能实现显示图片的功能，但它们在实际应用中有不同的特点和适用场景，如下表所示：

对比项	img	background-image
性质	HTML元素	CSS样式
图片是否占用空间	√	×
浏览器右键直接查看地址	√	×
支持CSS Sprite	×	√
更有可能被搜索引擎收录	√ (结合alt属性)	×

<img>标签通常用于展示网页内容中重要的图片，如广告图片、LOGO图片、文章配图、产品图片等，这些图片是网页内容的核心组成部分。而background-image主要用于装饰性图片，它可有可无，即使没有也不会影响用户获取完整的网页内容信息，但能让网页更加美观。

九.总结

本篇文章到这里就结束了🔚，掌握CSS背景设置的这些属性，能让我们在网页开发中更加得心应手地打造出绚丽多彩的页面。无论是简单的页面装饰，还是复杂的交互效果，合理运用背景属性都能为网页增色不少。希望大家在实践中多多尝试，创造出更多美观实用的网页！