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

篮之新喜 · 2024-11-19 04:29:51

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

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> 元素。

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块