文章目录
HTML 背景图像
几乎任何 HTML 元素都可以指定背景图像。
HTML 元素上的背景图像
要在 HTML 元素上添加背景图像，请使用 HTML style 属性和 CSS background-image 属性：
示例
在 HTML 元素上添加背景图像：
<pstyle="background-image:url('img_girl.jpg');">
还可以在
<head>
部分的
<style>
元素中指定背景图像：
示例
在
<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;
背景尺寸：100% 100%;}</style>
HTML
<picture>
元素
HTML
<picture>
元素针对不同的设备或屏幕尺寸显示不同的图片。
HTML
<picture>
元素为 Web 开发人员在指定图像资源时提供了更大的灵活性。
<picture>
元素包含一个或多个 元素，每个元素通过 srcset 属性引用不同的图像。这样，浏览器就可以选择最适合当前视图和/或设备的图像。
每个
<source>
元素都有一个 media 属性，用于定义图像何时最合适。
示例
针对不同的屏幕尺寸显示不同的图像：
<picture><sourcemedia="(min-width: 650px)"srcset="img_food.jpg"><sourcemedia="(min-width: 465px)"srcset="img_car.jpg"><imgsrc="img_girl.jpg"></picture>
注意：始终将
<img>
元素指定为
<picture>
元素的最后一个子元素。
<img>
元素用于不支持
<picture>
元素的浏览器，或者
<source>
标签均不匹配。
何时使用 Picture 元素
<picture>
元素有两个主要用途：
- 带宽 如果您的屏幕或设备较小，则无需加载大型图像文件。浏览器将使用具有匹配属性值的第一个 元素，并忽略以下任何元素。
- 格式支持 某些浏览器或设备可能不支持所有图像格式。通过使用 元素，您可以添加所有格式的图像，浏览器将使用它识别的第一个格式，并忽略以下任何元素。
示例
浏览器将使用它识别的第一个图像格式：
<picture><sourcesrcset="img_avatar.png"><sourcesrcset="img_girl.jpg"><imgsrc="img_beatles.gif"alt="Beatles"style="width:auto;"></picture>
注意：浏览器将使用具有匹配属性值的第一个
<source>
元素，并忽略任何后续
<source>
元素。
总结
本文介绍了的使用，如有问题欢迎私信和评论
版权归原作者 编程岁月 所有， 如有侵权，请联系我们删除。