请问这两个属性分别表示什么background-position的两个属性

<!DOCTYPE html>

<html>

<head>

<title>background-image</title>

/*此处写代码*/

div{

width:300px;

height:290px;

background:url("http://img1.sycdn.imooc.com/climg//582c3b780001a95103000090.jpg"),url("http://img1.sycdn.imooc.com/climg//582c3b6d0001197603000090.jpg"),url("http://img1.sycdn.imooc.com/climg//582c3b61000122dd03000090.jpg");

background-repeat:no-repeat;

background-position:center 0,center 100px,center 200px;

}

</style>

</head>

<body>

</body>

</html>

qq_慕粉6009927 2020-03-16

源自：CSS3背景与渐变 3-1 线性渐变、上下、左右、对角

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2020-03-16 18:53:19

同学你好，关于你的问题，回答如下：

1、第一个值是水平位置，第二个值是垂直位置

2、属性值可以是关键字，还可以是百分比，或者具体的单位，即：

（1）关键字的话，可以有以下这些组合：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom 、如果仅指定一个关键字，其他值将会是"center"

（2）x% y% ，百分比，第一个值是水平位置，第二个值是垂直。

左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％

（3）具体的单位（比如：px，px）: 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。

（4）inherit 属性值，指定background-position属性设置应该从父元素继承

3、这里代码中，使用逗号分隔，对应的分别是三张图片的。如下：