PC端/移动端的背景图片如何充满整个屏幕?

在日常写页面经常会用到背景图片,写电脑端的页面要用到背景图片时,我们第一反应想到的很可能就是三剑客——
{ width:100%; height:100%; background-image:url('相对路径')}

这样看起来似乎没什么问题,可当你用开发者工具变成移动端展示的时候会发现图片怎么充满不了手机屏幕!

这个时候只需要在CSS中加入三行代码即可完成PC/移动端的自适应背景图:

	overflow: hidden;
	background-size: cover; //让图片自动铺满整个容器
	background-position: center center; //在一些屏幕比图片小的设备上,让背景图片居中,即使在移动设备上也不会让图片的宽高比变得很奇怪

需要注意的是此方法虽然背景图片在PC端和移动端都可以不重复地将背景图片铺满但并不是100%整张图片都显示的,较适用于纯色或元素不复杂的图

你可能感兴趣的:(web前端,移动端背景图片铺满整屏)