为了账号安全,请及时绑定邮箱和手机立即绑定

纯CSS实现响应式背景图

标签:
Html/CSS

一、插入图片
1.插入一张图片,大小随机
2.body,html宽度100%;
3.img{ display:block; width:100%; max-width:100%; height:100%; }
注:宽度100%可以实现效果,但是高度自适应却有点复杂。因为高度的百分比是相对于整个html的,所以要给html,body加上100%。

二、设置background-image
1.给body加上背景图片
2.背景图片的size属性值是cover
3.宽高百分比

说明:这两种方法写出来的都是响应式的,也就是图片的宽度高度随着窗口缩放,可能会产生图片压缩的现象,但是图片是紧紧贴着可视区的。任君揉捏~
其中有几个知识点要说下:
1.高度自适应;
2.img是行内元素。不是块级元素。如果不给img加上block,页面上会出现一点点空隙,图片不能完全贴合。

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消