Question

如何使此背景图像可见且反应灵敏？（注意：我知道我应该单独使用CSS，但我使用的内容管理系统不会让我添加单独的CSS文件..）

如果设置了这样的代码，则不显示图像：

<div style="width: 100%; height: 100%; background-image:url('................');
    background-repeat:no-repeat; background-size:cover;">
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
</div>

并且像这样显示图像，但没有响应：

<div style="width: 100%; height: 100%; background-image:url('................');
    background-repeat:no-repeat; background-size:cover; height:150px;">
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
</div>

非常感谢！

Answer 1

如何将background-size用作包含？在这个jsfiddle中它起作用 https://jsfiddle.net/8fyLbj6r/

<div style="width: 100%; height: 100%; background-image:url('http://images.firstcovers.com/covers/i/its_easy_if_you_try-5332.jpg');
    background-repeat:no-repeat; background-size:contain; height:150px;">

</div>

Answer 2

Do-＆gt; 使用背景图片将float：left添加到第一个div 原因 - ＆gt; 高度％是相对的，在您的代码中它们与任何其他div没有相关性。例如100％的0 = 0。

请注意，你希望你的第一个div放在上面，而不是放在背景，然后把img标签放在空div中。但是再次需要在px中提到高度。尝试第一种方法。

将响应的背景图像设置为HTML中的div

2 个答案: