默认情况下背景颜色会延伸到border的区域，把border设置成点状可观察。
容器>背景图 ： 背景图平铺，直到铺满，显示多张背景图
容器=背景图 ： 只显示一张
容器<背景图 ： 只显示背景图的一部分
no-repeat 只铺一张背景图
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 双方向直到铺满
用来设置背景图片的位置。容器内就相当于九宫格内选择位置。
设置方式：
通过top left right bottom center 几个表示方位的词来设置背景。至少两个值。如果只写一个值，第二值默认是center。
background-position：center center； 表示九宫格中间。
background-position：bottom right 表示九宫格右下角
也可以通过像素来设置：
background-position：10px 100px ；（水平方向偏移量 垂直方向偏移量）
把左上角当做原点，上边框是x轴，左边框是y轴。（一般用到负值更多）
background-size 设置图片的尺寸
可选值：
width height 如果只写一个 第二个值默认auto。
cover 图片比例不变，将元素铺满
contain 图片比例不变，让图片在元素中完整显示
示例：
background: red url() no-repeat left center;
本文地址：https://blog.csdn.net/qq_42698576/article/details/107546500
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论