响应式的背景图像

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

解决背景图像的比例问题,我们可以使用一个跟图像比例一样的上边的内边距,把它应用在包装背景图像的元素上 …

先计算一下 … 我们要作为背景的图像,宽是 1366px,高度是 768px … 用高度除以宽度 … 得到的结果约等于 0.56 …

换算成百分比,应该就是 56% ….

打开网页的样式表 … 修改一下包装背景图像的 #showcase 的样式 …

先去掉这个固定的高度 … 然后添加一个 padding-top … 值就是刚才算出来的图像的比例 … 56% …

pt56p

保存 … 回到浏览器 …

调整窗口的宽度 … 现在的背景图像还有包装它的元素 … 就会按照一定的比例进行缩放 …

不过这里还有一个问题 …

并不是所有的图像高与宽的比例都是 56% … 解决的办法就是,把 background-size .. 设置为 cover …

意思就是 .. 背景图像会填满包装它的容器 … 并且会保持图像的比例去缩放 …

回到样式表 … 把这个 background-size:100% … 修改成 cover …

这样,如果背景图像的比例不一样 … 或者,我们使用不同的比例 … (修改 padding-top )

背影图像都会保持原有的比例,填满整个容器显示 ….

响应式的背景图像《 响应式网页设计 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点