如何让一张图片不重复铺满整个浏览器?

关于图片的一个css 技巧

要让容器与浏览器宽度,高度相等,可以通过设置html, body的width, height都为100%,然后用body来设置背景图片。也可以通过js自动调整容器的width与height。还有就是我最爱的下面神单位vw, vh。

background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 100vw;  // 这个设置容器宽度为浏览器宽度
height: 100vh; // 这个设置容器高度为浏览器高度

相关:

如何让一张图片不重复铺满整个浏览器?-Npcink
如何让一张图片不重复铺满整个浏览器?-Npcink

七个你可能不了解的CSS单位

国外主题

Reddot - 最小和现代WooCommerce WordPress主题

2019-11-25 15:32:10

国内主题

LightSNS - 主打轻社交、用户互动、论坛的WordPress主题

2020-1-15 10:02:00

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索