7-4 使用媒体查询优化 CSS 背景图像

已于 2022-03-23 18:43:51 修改
阅读量281 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端知识加深 文章标签： 性能优化
于 2021-06-24 09:58:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/118178064
本文介绍了如何使用媒体查询优化CSS背景图像，以实现响应式设计。通过理解响应式背景图片的工作原理，结合媒体查询设置不同屏幕尺寸的断点，可以按需发送不同大小的图像，提高页面加载性能。最后，文章提到了CSS的image-set()函数作为未来的潜在替代方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

许多站点请求大量资源，例如图像，这些资源并未针对某些屏幕进行优化，并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是一种流行的技术，用于将定制的样式表和资产交付到不同的屏幕，以减少传输给用户的数据量并提高页面加载性能。本指南将向您展示如何使用媒体查询发送所需大小的图像，这种技术通常称为响应式图像。

先决条件

本指南假设您熟悉Chrome DevToolshttps://developers.google.com/web/tools/chrome-devtools。如果您愿意，可以改用其他浏览器的 DevTools。您只需将本指南

了解本专栏 订阅专栏 解锁全文
CSS3 背景图像的重复模式与大小调整
小白菜的博客
05-27 792
本文旨在全面介绍CSS3中控制背景图像重复模式和大小调整的技术。我们将从基础属性开始，逐步深入到高级应用技巧，帮助读者掌握如何创建美观、响应式的网页背景效果。文章首先介绍背景图像的基本概念，然后详细讲解background-repeat和background-size属性的各种用法，接着通过实际案例展示这些技术的应用，最后探讨相关工具和未来发展趋势。背景图像(Background Image)：设置在HTML元素背后的图像，不会影响元素内容。重复模式(Repeat Pattern)
前端性能优化：使用媒体查询加载指定大小的背景图片
weixin_33860722的博客
07-08 221
为什么80%的码农都做不了架构师？>>> ...
浅谈CSS Sprites技术以及图片优化 〔背景图整合〕
dieyanxiu7528的博客
08-02 145
不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON，栏目背景啊，图片按钮啊等都有会有规则的合并一张背景图,然后用background-position来实现背景图片的定位，他们为什么要花费一些时间来合并这些CSS背景图片呢,CSS中用一张背景图做页面的技术到底有什么优势呢? 当您往U盘中拷200张图片，...
为网页中图片src添加媒体查询功能。
weixin_34320159的博客
03-18 717
2019独角兽企业重金招聘Python工程师标准>>> ...
利用媒体查询简单实现设备和浏览器不同像素展示的效果
月来better
12-22 404
其实设备和浏览器的媒体查询写法大体相像，不同之处就是设备比浏览器的写法要多一个device，而且要注意的是对于初次使用媒体查询的小伙伴，一定要规范写法，and两边一定要空一格。 浏览器上的媒体查询效果 1.浏览器像素在1000px~以上 2.浏览器像素值在600~999 3.浏览器像素值在100~599 HTML: <div id="wrapper"> <div></div> <div></div> <div></
通过媒体查询引入不同的资源文件
rj2017211811的博客
02-03 657
假设body里面有两个div，当屏幕宽度>640px的时候，让屏幕一行显示两个div，当屏幕宽度>320px的时候，让屏幕一行显示一个div <body> <div></div> <div></div> </body> style320.css div{ width: 100%; height...
bg-blur:使用CSS仅模糊背景视频
03-06
然后，它使用SVG内联数据作为背景图像，通过`filter`属性应用高斯模糊。最后，我们通过调整`stdDeviation`值（在这里是`10px`）来控制模糊程度。 请注意，由于浏览器兼容性问题，这种方法可能不适用于所有用户。...
cloudinary-responsive-bg:Cloudinary的响应式CSS背景图像示例
05-06
`cloudinary-responsive-bg`项目就是针对这一需求，展示如何利用Cloudinary创建响应式的CSS背景图像。 首先，我们来看`npm i`命令，这表示通过Node.js的包管理器NPM安装项目依赖。在`cloudinary-responsive-bg`项目...
Parallax-webpage:使用HTML，CSS和JavaScript的图像滚动动画
05-25
可以使用媒体查询（`@media`）来改变不同设备上的滚动速度和图像尺寸，确保在各种设备上都有良好的用户体验。 ```css @media (max-width: 768px) { .parallax-background { background-attachment: scroll; /* 在...
CSS小技巧之替换图片(content)
热门推荐
qq_45745643的博客
09-20 1万+
一想到替换图片，我们大部分人可能都会想到用background-image或用两个img元素控制显示隐藏来实现，其实还可以利用css的content属性来替换img中的内容来实现。 Part 1 1.首先我们使用content属性来生成一张图片，先写两个img标签 <img src="img/qaq.jpg"> <img> 2.第一个img用src引入一张图片，第二个img是个空标签，注意这里不要写src属性，就是一个单纯的< img >！然后写cs.
html媒体查询怎么把颜色换成图片,为网页中图片src添加媒体查询功能。
weixin_42171132的博客
06-17 347
为图片src 增加媒体查询。Css 中的媒体查询默认是没有为图片指定src,的 但是如果页面中需要根据浏览器宽度指定图片src, 比如当电脑的时候，加载大图，手机的时候加载小图。今天发现一个很棒的方法，相当于通过js可以扩展浏览器的媒体查询，Picturefillbody{font-family:sans-serif}img{max-width:100%}Picturefill:...
使用@media媒体查询实现多设备字体图片自适应
timeless的博客
04-05 5396
@media only screen and (min-width: 374px) { html { font-size: 60.5% !important; } } @media only screen and (min-width: 414px) {
响应式媒体查询实现方法
chenbixi的博客
08-26 1259
响应式开发媒体查询实现方法 响应式开发屏幕大小： 超小屏幕 移动设备 w<768px 小屏幕 768px-992px 768px<=w<992px 中屏幕 992px-1200px 992px<=w<1200px 宽屏幕 1200px以上 w>=1200px 媒体查询基本实现方式 常用属性设置 css基本语法 @media media...
高清屏及适配不同设备的方案总结
weixin_34151004的博客
10-19 476
关于一些Retina，设备像素，移动适配的知识，网上一搜也是一大把，但是基本的东西并没有变化太多。下面就我看过的一些有关于这方面的知识做一些总结（仅以个人的角度出发，所以有不全的地方还请大家谅解）。后面会有不定期的更新~每个知识点我都会在开关写出引用地址，所以大家有不懂的可以看原文章~ 一、关于设备像素比（devicePixelRatio） 出处：高清屏概念解析与检测设备像素比的方法 所谓设备像...
css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片
weixin_39876645的博客
08-03 8775
之前写过一篇：CSS中background属性总结整理了background的常用属性。日常项目中经常会用到全屏的图片， .png 和 .jpg 的图片都太大，加载缓慢。我们可以使用webP格式的图片或者分辨率较低的压缩图，再叠加一层清晰的png 图片，实现快速显示的效果。叠加 png 图片的目的是防止某些浏览器不支持 webP 格式。CSS代码：body{background-image:...
媒体查询-背景图自适应
weixin_44817062的博客
07-19 903
媒体查询-背景图自适应 技巧：当某部分需要加图片时，最好将其作为背景图，比直接加在页面更便于操作 一、页面组件 <template> <div class="newEnter"> <div class="newEnter-box"> <div class="zhaobiao-img" @click="goZhaobiao()"> </div> <div class="qiye-img" @cli
前端提高篇（四十五）CSS进阶10Media媒体查询
安之ccy的博客
03-11 678
媒体查询主要用于布局 常见的布局： 1.静态布局：框宽度大小固定，不会随着浏览器显示区域大小的改变而改变，有足够的空间，元素不会串行等 2.流式布局：当浏览器显示区域大小改变时，整体布局不变（几行几列不变），但dom元素的大小在变，不用固定宽度，用百分比。父级大，里面的元素占的位置就大 3.自适应布局 4.响应式布局 当媒体类型为true，媒体特性也为true，设置的样式就可以生效 媒体查询引入方式： 1.link元素中的css媒体查询： <link rel="stylesheet" href="1
css中怎么改变图片尺寸,CSS也可以改变图片幅面尺寸
weixin_31049801的博客
08-03 2167
一般情况下，只有标签中的图片，可以根据宽高设定来改变大小。比如1024x768的图，我们设width="640",height="480"，他就会显示640x480。往往为了避免不必要的数据传输，反而不提倡读取非实际大小的图片。但我也没有想到，这世界上有些情况，恰恰需要用一个固定尺寸去读取实际上大很多很多的图片。为的是，增加屏幕显示的DPI。做Smart phone网站时，不用说Retina，一般...
汉字--拼音--网页汉字转拼音--包教包会
liuhao9999的博客
09-07 1万+
"疮": "chuāng","窗": "chuāng","幢": "zhuàng","床": "chuáng","闯": "chuǎng","创": "chuàng","霜": "shuāng","双": "shuāng","桩": "zhuāng","庄": "zhuāng","装": "zhuāng","妆": "zhuāng","撞": "zhuàng","壮": "zhuàng","状": "zhuàng","昌": "chāng","猖": "chāng","场": "chǎng",
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫微前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值