扫码关注官方订阅号
有点像是背景图 上面有一些文字
小伙看你根骨奇佳，潜力无限，来学PHP伐。
一般来讲会使用一张分辨率比较大的图（1920*1080）作为背景图，然后再背景图设置background-size:cover;background-postion: center;
如果浏览器支持css3,那么图片小一点也无所谓，background-size设置成cover的话，会让图片自动铺满整个容器，就算不支持css3，只要图片够大，就不会出现有留白的现象。
background-postion设置为center，这样会在一些屏幕比图片小的设备上，让背景图片居中，即使在移动设备上也不会让图片的宽高比变得很奇怪。（如果你的容器宽高比是不变的话，那也可以不加这个属性。）
1.把图片做背景，css3
background-size:cover
2.不支持css3的，把图片做背景，js动态计算后，确定
background-position
的数值（如果图片够大，不用考虑repeat的话）
3.图片img，js动态计算需要宽高，这个图片比例会出先问题
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
2
463
收藏
一般来讲会使用一张分辨率比较大的图（1920*1080）作为背景图，然后再背景图设置background-size:cover;background-postion: center;
如果浏览器支持css3,那么图片小一点也无所谓，background-size设置成cover的话，会让图片自动铺满整个容器，就算不支持css3，只要图片够大，就不会出现有留白的现象。
background-postion设置为center，这样会在一些屏幕比图片小的设备上，让背景图片居中，即使在移动设备上也不会让图片的宽高比变得很奇怪。（如果你的容器宽高比是不变的话，那也可以不加这个属性。）
1.把图片做背景，css3
2.不支持css3的，把图片做背景，js动态计算后，确定
的数值（如果图片够大，不用考虑repeat的话）
3.图片img，js动态计算需要宽高，这个图片比例会出先问题