html - 响应式图像 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 的 fiddle ，这很难说，但是如果您有包含第一个工作图像的包含元素(div 或其他东西)，请将第二个图像放入其中，并将您的 CSS 设置为类似以下内容:

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

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

使用 background-position，在这种情况下，您可以或多或少地使用边距完成操作。我为后两个值设置了 40%，但您可以根据需要进行调整。大小相同。

这应该会保持原位，但我还没有用 fiddle 测试过。