要求:
图片尺寸任意,图片宽高比任意(意思就是随便拿张图片都得ok),渲染后不可变形
图片中心与可视区中心重合
图片充满整个屏幕
自适应屏幕宽高变化
给图片上一层蒙版,便于在其上渲染文字
思路分析:
宽高比任意,且不变形,可以推测到背景图的宽和高必定是一方某一长度设置,一方是auto,这样才能保证不变形,所以代码中关于background-size属性需要这样设置。
图片中心与可视区中心重合,所以 background-position: center
图片充满整个屏幕,需要多重考虑:
(1)如果此时浏览器可视窗口的宽高 和图片宽高 比例是下面这种
bgimg1.png
为满足充满屏幕且不变形,图片应该宽度100% 高度自适应
background-size:100% auto;
(2)如果此时浏览器可视窗口的宽高 和图片宽高 比例是另一种情况
bgimg2.png
为满足充满屏幕且不变形,图片应该高度100% 宽度自适应
background-size:auto 100%;
套一层蒙版,在里面直接写就行,记得加一个背景色和透明度,宽高和父元素相同完全覆盖就ok了。
代码:
背景图片问题
* {
margin: 0;
padding: 0;