Question

#example1 {width: 500px;
height: 250px;
background-image: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png), 
url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png);
background-position: 20px 10px, 100px 250px;
background-repeat: no-repeat;
}

具有固定背景位置的背景图片不起作用Demo

Answer 1

高度和背景位置的最后一个数字相同。改为这个，看看。

background-position: 20px 10px, 100px 100px;

<强> Demo

Answer 2

将其写为 -

#example1 {
  width: 500px;
  height: 250px;
  background: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 20px 10px, url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 200px 50px;
}

Demo

您的代码也可以使用，但代码的问题在于您将第二个图像的顶部位置设置为250px;容器高度为250px;这就是为什么它不可见:)。

多背景图像不适用于位置

2 个答案: