响应式图像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%，但您可以根据需要进行调整。大小一样。

这应该让它保持原位，但我没有用小提琴测试过。