前端必知必会-html背景图片设置

编程流年

于 2024-07-23 09:00:00 发布

阅读量654

点赞数 15

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_24018193/article/details/140572095

版权

文章目录

HTML 背景图像
HTML 元素上的背景图像
页面上的背景图像
背景重复
背景覆盖
背景拉伸
HTML `<picture>` 元素
何时使用 Picture 元素
总结

HTML 背景图像

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

HTML 元素上的背景图像

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

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

<p style="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>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>

注意：始终将 <img> 元素指定为 <picture> 元素的最后一个子元素。 <img> 元素用于不支持 <picture> 元素的浏览器，或者 <source> 标签均不匹配。

何时使用 Picture 元素

<picture> 元素有两个主要用途：

带宽
如果您的屏幕或设备较小，则无需加载大型图像文件。浏览器将使用具有匹配属性值的第一个元素，并忽略以下任何元素。
格式支持
某些浏览器或设备可能不支持所有图像格式。通过使用元素，您可以添加所有格式的图像，浏览器将使用它识别的第一个格式，并忽略以下任何元素。

示例
浏览器将使用它识别的第一个图像格式：

<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

注意：浏览器将使用具有匹配属性值的第一个 <source> 元素，并忽略任何后续 <source> 元素。

总结

本文介绍了的使用，如有问题欢迎私信和评论