响应图像css没有响应

Question

大家好我已经在css中放置了一个图像并且工作正常以下是代码：

<div class="r-img" ></div>

和css

 .r-img {
background-image: url(./img/cloud2.png);
background-size: 30%;
background-repeat: no-repeat;
overflow: hidden;
padding: 439;
margin-left: 4%;
margin-top: 0%;
}

以下是打印屏幕：http://imgur.com/p6m3PM5

当我使用CTRL + Scrool或我改变分辨率时，一切都很完美，图像就在那里

我想添加更多图片，但即使我使用与第一张图片完全相同的CSS，它也不会修复页面。看一看。

    <div class="tel" ></div>

和css

.tel {
background-image: url(./img/sms-6-256.png);
background-size: 30%;
background-repeat: no-repeat;
overflow: hidden;
margin-left: 4%;
margin-top: 0%;
}

完全相同。

添加了图像，但是当我更改分辨率或放大图像时，移动：

任何想法？感谢。

Answer 1

如果没有一个包含更多HTML的小提琴，这有点难以说，但是如果你有一个包含第一个工作图像的包含元素（div或其他东西），则将第二个图像放入其中，并将您的CSS设置为：

background-image:url(firstimage.png),url(secondimage.png);
background-position:4% 0%,40% 40%;
background-size:30%,5%;

以逗号分隔的值组将把两个图像放在这些样式将应用于的同一元素中。所有这些逗号分隔值将用于它们各自的图像。也就是说，第一个值仅适用于第一个图像，第二个值仅适用于第二个图像。

使用background-position，在这种情况下，你可以做更多或更少的保证金。我为后两个值添加了40％，但您可以根据需要进行调整。与大小相同。

这应该保持原位，但我没有用小提琴进行测试。