HTML背景图片

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

HTML 元素上的背景图像

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

示例

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

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

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

示例

在'''

<style></nowiki> ''' 元素中指定背景图片：" > <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>