HTML 背景图像

几乎可以为任何 HTML 元素指定背景图像。

HTML 元素上的背景图像

要在 HTML 元素上添加背景图像，请使用 HTML style 属性和 CSS background-image 属性：

实例

在 <p> 元素上添加背景图像：

<p style="background-image: url('flower.gif');">

亲自试一试

您也可以在 <head> 部分的 <style> 元素中指定背景图像：

实例

在 <style> 元素中指定背景图像：

<style>
p {
  background-image: url('flower.gif');
}
</style>

亲自试一试

页面背景图像

如果您希望整个页面具有背景图像，则必须在 <body> 元素上指定背景图像：

实例

为整个页面添加背景图像：

<style>
body {
  background-image: url('flower.gif');
}
</style>

亲自试一试

背景重复

如果背景图像小于元素，图像将在水平和垂直方向上重复，直到到达元素的末端：

实例

<style>
body {
  background-image: url('flower.gif');
}
</style>

亲自试一试

要避免背景图像重复，请将 background-repeat 属性设置为 no-repeat。

实例

<style>
body {
  background-image: url('flower.gif');
  background-repeat: no-repeat;
}
</style>

亲自试一试

背景覆盖

如果您希望背景图像覆盖整个元素，可以将 background-size 属性设置为 cover。

此外，为确保整个元素始终被覆盖，请将 background-attachment 属性设置为 fixed：

这样，背景图像将覆盖整个元素，且不会拉伸（图像将保持其原始比例）：

实例

<style>
body {
  background-image: url('flower.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

亲自试一试

背景拉伸

如果您希望背景图像拉伸以适合整个元素，可以将 background-size 属性设置为 100% 100%：

尝试调整浏览器窗口大小，您将看到图像会拉伸，但始终覆盖整个元素。

实例

<style>
body {
  background-image: url('flower.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

亲自试一试

了解更多 CSS 知识

从上面的示例中，您已经了解到可以使用 CSS background 属性来设置背景图像的样式。

要了解更多关于 CSS background 属性的知识，请学习我们的 CSS 背景教程。