css背景图不失真_html css 中非常经典的背景图片充满屏幕且不变形问题

要求：

图片尺寸任意，图片宽高比任意(意思就是随便拿张图片都得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;