用户在网站上看到的内容将影响他们的用户体验，也会影响他们总体上使用整个网站的难易程度。
将图像添加到网站某些部分的背景通常比仅更改背景颜色更具视觉吸引力和趣味性。
现代浏览器支持各种图像文件类型，如 .jpg、.png、.gif 和 .svg。
本文介绍了如何将图像添加到 HTML 代码中，以及如何对它们进行微调以使其看起来更好。
背景图像语法
第一步是确保创建一个素材目录（文件夹）来保存要在项目中使用的图像。
例如，我们可以在我们正在处理的项目中创建一个 images 文件夹，并添加我们想要使用的名为 sunset.png 的图像。
background-image CSS 属性允许你将图像放置在任何 HTML 元素后面。
这可以是整个页面（通过使用 CSS 中的 body 选择器，它以 HTML 中的 <body> 元素为目标），或者只是页面的一个独立特定部分，例如下面示例中的 section 元素。
要将 background-image 添加到 .css 文件中的 section 标签，请编写以下代码：
section {
background-image: url("images/sunset.png");
}
让我们详细讨论这里发生的事情：
section指定要将图像添加到的标签。url()用于告诉 CSS 我们的图像所在的位置。- 在括号内，
"images/sunset.png"是图像的路径。这让浏览器知道要拉取哪个 URL。 - 本例中的路径叫作相对路径（
relative），这意味着它是一个本地文件，相对于我们的项目和我们当前的工作目录，而不是网址。要添加图像，我们还可以使用绝对路径（absolute），它是一个完整的网址，以域 URL（http://www.）开头。 - 使用引号是一个好习惯，但我们可以省略它们，所以
background-image: url(images/sunset.png)的工作原理是一样的。 - 不要忘记分号！
如何停止背景重复
当你将背景图像应用于元素时，默认情况下它会重复。
如果图像小于它作为背景的标签，它将重复以填充标签。
我们如何阻止这种情况发生？
background-repeat 属性有 4 个值，我们可以改变图像重复的方向，或者阻止图像重复。
section {
background-repeat: repeat;
}
如果我们不给 background-repeat 属性设置一个值，这就是默认值。在这种情况下，图像在水平和垂直方向上（即在 x 方向和 y 方向上）重复，直到它填满空间。
section {
background-repeat: no-repeat;
}
no-repeat 值阻止图像从各个方向重复自身。图像只显示一次。
section {
background-repeat: repeat-y;
}
这个值仅在页面上水平重复图像。图像在 x 轴方向（x-direction）在整个页面上重复。数学中的 x 轴方向是从左到右。
section {
background-repeat: repeat-y;
}
这个值仅在页面上垂直重复图像。图像在 y 轴方向（y-direction）沿页面向下重复。数学中的 y 轴方向是从上到下。
如何设置背景位置
添加背景图像并阻止其重复后，我们可以通过改进其位置来进一步控制它在标签背景中的外观。
我们将使用 background-position 属性来做到这一点。
选择器接受两个值。第一个是水平位置，或 x 轴方向（跨标签多远）。第二个是垂直位置，或 y 轴方向（标签向下多远）。
这些值可以是单位，例如一对像素：
section {
background-position: 20px 30px;
}
这将使图像在包含它的标签上移动 20 像素，向下移动 30 像素。
我们可以使用一组关键字（如 right、left、top、down 或 center）代替像素来将图像放置在标签的右边、左边、上面、下面或中间。
section {
background-position: right center;
}
这会将图像放置在标签中心的右侧。
如果我们想将它水平和垂直居中，我们将执行以下操作：
section {
background-position: center center;
}
为了以更精细的细节定位图像，值得一提的是我们可以使用百分比。
section {
background-position: 20% 40%;
}
这将图像定位在标签上的 20% 和标签下的 40%。
到目前为止，我们已经看到了组合使用的值，但我们也可以只指定一个值，例如 background-position: 20px; 或 background-position: center; ，这适用于两个方向。
如何调整背景图像的大小
要控制背景图像的大小，我们可以使用 background-size 属性。
同样，就像前面提到的属性一样，它接受两个值。一种用于水平（x）尺寸，一种用于垂直（y）尺寸。
我们可以使用像素，像这样：
section {
background-size: 20px 40px;
/* sizes the image 20px across and 40px down the page */
}
如果我们不知道存储图像的容器的确切宽度，我们可以为该属性指定一组特定值。
background-size: cover;调整背景图像的大小，使其覆盖整个标签的背景空间，无论标签的宽度如何。如果图像太大并且与它所在的标签有更大的比例，这意味着图像将被拉伸并因此在其边缘被裁剪。background-size: contain;顾名思义，包含图像，它将确保整个图像显示在背景中，而不会裁剪掉任何图像。如果图像比标签小得多，就会有空间留空，这将使其重复填充，因此我们可以使用之前提到的background-repeat: no-repeat;。
background-size:cover; 在这种情况下将裁剪图像的部分。
当我们将其更改为 background-size:contain;，我们看到图像缩小以适应 section 标签。
如何使用 Background Attachment 属性
使用 background-attachment 属性，我们可以控制背景图像的位置，意思是是否把图像固定在浏览器上。
默认值是 background-attachment: scroll;，其中背景图像与其标签保持一致，并随着我们上下滚动而上下滚动，从而跟随页面的自然流动。
该属性可以设置的第二个值是 background-attachement: fixed;。这使背景图像保持在同一位置，固定在页面上，并固定在浏览器的视口上。这会产生视差效果，你可以在此处查看示例：
背景渐变
background-image 属性的另一个用例是告诉浏览器创建渐变。
这种情况下的背景图像没有 URL，而是一个线性渐变。
最简单的方法是指定角度。这控制了渐变的方向以及颜色将如何混合。最后为标签的背景添加两种你想要在渐变中混合在一起的颜色。
从上到下，从黑到白的渐变是：
section {
background-image: linear-gradient(black,white);
}
最常用的梯度度数是：
- 从上到下
0deg - 从左到右
90deg - 从下到上
180deg - 从右到左
270deg
上述度数分别对应于上、右、下和左。
section{
background-image: linear-gradient(to left,pink,orange);
}
我们可以使用十六进制颜色来代替关键字颜色，使其更加具体并具有更广泛的选项：
section{
background-image: linear-gradient(to left,#42275a, #734b6d)
}
我们还可以在渐变中包含两种以上的颜色，创建不同的效果和配色方案。
结论
以上就是对 background-image 属性的基本语法的介绍。
从这里开始，可能性是无穷无尽的，并为很多创造性的表达留下了空间。这些效果可以帮助用户在访问你的网站时获得愉快的体验。
我希望这对你有所帮助。感谢阅读本文。
祝你享受设计和编码的快乐！
原文：CSS Background Image – With HTML Example Code，作者：Dionysia Lemonaki