前端笔记之css背景图片设置

background-size:100%;总是X轴100%铺满整个容器,Y轴可能被裁剪会出现空白填不满部分,图片不变形。

background-size:100% 100%;图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器,图片可能会变形。

background-size:cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器,但图片超出容器部分会被裁剪掉,图片不变形。

background-size:contain;图片保持比例放大或缩小填充容器,若不能完整填充容器,X轴或Y轴都有可能出现白边,图片不变形。

Object-fit:

background 简写属性在一个声明中设置所有的背景属性。他有8个属性:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

他是一个复合属性:为了可读性,定一个CSS书写规范,规则2.1:

background的值的顺序是background-color,background-image,background-repeat,background-attachment,background-position。

其余三个background-size,background-origin,background-clip是要单独写的

猜你喜欢

转载自blog.csdn.net/qq_45393395/article/details/120564690