css-background属性连写

CSS中背景相关属性的连写

background: color image repeat position;

给350*400的div盒子设置背景：

div {
    width: 350px;
    height: 400px;
    background: lightblue url('./css-background/image.jpg') no-repeat right center;
}

1、background-repeat属性有四个属性值：repeat/no-repeat/repeat-x/repeat-y。




2、background-position属性值：background-position-x background-position-y

background-position的值有三种表示方法：

①关键词。水平：left/center/right；垂直：top/center/right。

②数值长度值。background-position: mpx npx;(以左上角坐标为原点，向右向下为正轴)例如background-position: -20px 30px;表示图片左上角顶点距离原点左移20px，下移30px。

③百分比。background-position: x% y%;left top等价于0% 0% ；right bottom等价于100% 100%。且参考位置是包括元素的contend+padding（如下图所示）。