前端必知必会-html背景图片设置
编程岁月 2024-09-05 14:33:02 阅读 94
文章目录
HTML 背景图像HTML 元素上的背景图像页面上的背景图像背景重复背景覆盖背景拉伸HTML `<picture>` 元素何时使用 Picture 元素总结
HTML 背景图像
几乎任何 HTML 元素都可以指定背景图像。
HTML 元素上的背景图像
要在 HTML 元素上添加背景图像，请使用 HTML style 属性和 CSS background-image 属性：
示例
在 HTML 元素上添加背景图像：
<code><p style="background-image: url('img_girl.jpg');">code>
还可以在 <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">code>
<source media="(min-width: 465px)" srcset="img_car.jpg">code>
<img src="img_girl.jpg">code>
</picture>
注意：始终将 <img> 元素指定为 <picture> 元素的最后一个子元素。 <img> 元素用于不支持 <picture> 元素的浏览器，或者 <source> 标签均不匹配。
何时使用 Picture 元素
<picture> 元素有两个主要用途：
带宽
如果您的屏幕或设备较小，则无需加载大型图像文件。浏览器将使用具有匹配属性值的第一个 元素，并忽略以下任何元素。
格式支持
某些浏览器或设备可能不支持所有图像格式。通过使用 元素，您可以添加所有格式的图像，浏览器将使用它识别的第一个格式，并忽略以下任何元素。
示例
浏览器将使用它识别的第一个图像格式：
<picture>
<source srcset="img_avatar.png">code>
<source srcset="img_girl.jpg">code>
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">code>
</picture>
注意：浏览器将使用具有匹配属性值的第一个 <source> 元素，并忽略任何后续 <source> 元素。
总结
本文介绍了的使用，如有问题欢迎私信和评论
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。