码农教程 - 一技在手,衣食无忧! tools

HTML 背景图片

❮ 上一节 下一节 ❯

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

HTML 元素上的背景图片

要在 HTML 元素上添加背景图片，请使用 HTMLstyle属性和 CSSbackground-image属性：

示例

在 HTML 元素上添加背景图片：

<p style="background-image: url('img_girl.jpg');">
亲自试一试 »

您还可以在中指定背景图片<style>元素，在<head>部分：

示例

指定背景图片<style>元素：

<style>
p {
  background-image: url('img_girl.jpg');
}
</style>
亲自试一试 »

页面上的背景图片

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

示例

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

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
亲自试一试 »

背景重复

如果背景图片小于元素，图片将水平和垂直重复自身，直到到达元素的末尾：

示例

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
亲自试一试 »

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

示例

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
亲自试一试 »

背景封面

如果你想让背景图片覆盖整个元素，你可以设置background-size属性为cover.

另外，为了确保整个元素始终被覆盖，请设置background-attachment属性为fixed:

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

示例

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
亲自试一试 »

背景拉伸

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

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

示例

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
亲自试一试 »

HTML练习

通过练习测试一下

练习:

在 HTML 元素上添加名为 "myimage.png" 的背景图片。

<p style="background-image: ">

开始练习

了解更多CSS

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

要了解有关 CSS 背景属性的更多信息，请研究我们的CSS 背景教程。


❮ 上一节 下一节 ❯