在某业务场景下,需要支持背景图的平铺和拉伸,那么在CSS中的这俩属性表现有何区分关系到是否符合业务表现,因此有必要清晰知道其差别。
原本以为只有自己会遇到,没想到群里有小伙伴也问到了。
0x00 background-size
在CSS中有background-size属性,平铺与拉伸可以通过下面两个值实现:
- 平铺:
cover
- 拉伸:
100% 100%
0x01 表现如何
设置的背景图原图比例表现如下:
比较的代码实现如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图长宽比例问题探索</title> <style type="text/css"> *{ margin: 0; padding: 0; border: 0; } .box { width: 400px; height: 300px; background-color: aquamarine; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: cover; background-position: center; } .box2 { width: 400px; height: 300px; background-color: red; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: 100% 100%; background-position: center; } </style> </head> <body> <div class="box"></div> <div style="height: 50px;"></div> <div class="box2"></div> </body> </html>
其浏览器中表现如下图:
可以发现,拉伸是根据容器的宽高来设置图片的宽高,能完整展示整个图片内容,但图像内容发生了变形
而平铺比较特殊,完全展示了图片的高度,但是左右两边被裁掉了一部分,无法展示完整的图片,但图片的宽高比例没变,因此图像不存在变形
将宽高值互换:
.box { width: 300px; height: 400px; background-color: aquamarine; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: cover; background-position: center; } .box2 { width: 300px; height: 400px; background-color: red; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: 100% 100%; background-position: center; }
其表现如下:
0x02 总结
相较于平铺属性,拉伸的效果非常好理解。平铺,按照我个人理解,平铺的渲染规则是,以图片的“短边”为基准,对图片进行等比例缩放,缩放后的图片“短边”长度等于“短边”所对应容器“边”的长度,“长边”缩放后多余的部分被裁剪。
换句话说,谁短谁牛逼!
参考
版权声明:《 [CSS]背景图片中平铺与拉伸 》为DYBOY原创文章,转载请注明出处!
最后编辑:2020-10-21 14:10:18
2021-03-07 23:54
2021-01-02 13:33
2021-09-04 12:21
2020-11-28 16:24
2020-11-21 00:54