二维码
搜索 ×

HTML 背景图像

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 背景图像

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

HTML 元素上的背景图像

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

1
2
3
在 HTML 元素上添加背景图像：

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

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

1
2
3
4
5
在元素中指定背景图像：`<style>`

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

页面上的背景图像

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

1
2
3
4
5
为整个页面添加背景图片：

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

背景重复

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

1
2
3
<style>  
body {  background-image: url('example_img_girl.jpg');}  
</style>

若要避免背景图像重复出现，请设置 自。background-repeat``no-repeat

1
2
3
4
<style>  
body {  background-image: url('example_img_girl.jpg');  
  background-repeat: no-repeat;}  
</style>

背景封面

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

此外，若要确保始终覆盖整个元素，请将该属性设置为background-attachment``fixed:

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

1
2
3
4
5
6
<style>  
body {  background-image: url('img_girl.jpg');  
  background-repeat: no-repeat;  
  background-attachment: fixed;  
  background-size: cover;}  
</style>

背景拉伸

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

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

1
2
3
4
5
6
<style>  
body {  background-image: url('img_girl.jpg');  
  background-repeat: no-repeat;  
  background-attachment: fixed;  
  background-size: 100% 100%;}  
</style>

了解更多 CSS

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

要了解有关 CSS 背景属性的更多信息，请学习我们的 [CSS 背景教程]。

推荐教程