背景常见属性
background-color
background-image
background-repeat
background-size:
background-position
background-origin
background-clip
.box{
width: 400px;
height: 400px;
/* 1:设置背景色 */
background-color: red;
border: 10px black double;
/* 2:设置背景图片
语法: background-image: url(./img/小图.webp);
——可以同时设置背景色,和背景图片,如果同时设置,背景色是在背景图片下面
——图片在元素中位置
如果背景图片大于元素,默认是显示图片左上角
如果一样大,则正常全部显示
如果图片小于元素,则默认情况下,背景图片会平铺充满元素
*/
background-image: url(./img/小图.webp);
/*3: background-repeat: ; 设置背景图片重复的方式
可选值:
repeat 默认值 双方向重复
no-repeat 不重复,有多大就显示多大
repeat-x 水平方向重复
repeat-y 垂直方向重复
*/
background-repeat: no-repeat;
/* 4: background-position: ; 设置图片在元素中的位置,
默认是在元素的左上角
可选值:
1、 top right left bottom center中两个值
如果只写一个值,第二个值默认是center
2、也可以直接指定两个偏移量
第一个值,是水平的偏移量 可正(向右) 可负(向左)
第二个值,是垂直的偏移量 可正(向下) 可负(向上)
*/
background-position:200px 100px;
}
.box{
width: 400px;
height: 400px;
padding: 40px;
background-color: red;
background-image: url(./img/大图2.webp);
background-repeat: no-repeat;
/* background-position:100px 100px; */
border: 10px black double;
/* 5 background-clip: ; 设置背景的范围
可选值:
border-box 默认值,背景色会出现在边框下面
padding-box 背景就不会出现在边框下,出现在内容区和内边距区
content-box 背景图出现在内容区下面
*/
background-clip:content-box ;
/* 6:background-origin: ; 设置背景图片偏移量原点,
一般情况下,配合background-position使用
可选值
border-box 从边框开始计算偏移量
padding-box 默认值 从内边距开始计算
content-box 从内容区开始计算偏移量 */
background-origin:content-box ;
/* 7:background-size: ; 设置背景图片的大小
1: 参数
第一个值:宽度
第二个值:高度
如果只写一个,第二个值,为auto
2:cover 图片的比例不变,将元素铺满
contain 图片比例不变,将元素完整显示
*/
background-size:contain;
}