如何使用 html 在背景图像上插入图像？但它应该是有反应的

Question

我尝试这样做，但我在背景图片下方看到了 image2 和文本。我尝试使用 position 标签，但它没有使我的网页响应。

这是我的代码：

<div class="row" >
     <div class="cols12"> 
         <img style="height: 350px; width: 100%;"         src="image1.jpg">
         <img style="height: 200px;" src="image2.jpg">
         <h2>HELLOO</h2>
     </div>
</div>

Answer 1

您可以通过添加 bootstrap 让您的图片响应。无需下载，只需访问 bootstrap 网站，获取 link，然后 link 到 html 中的 bootstrap css 文件] 医生。然后，您可以通过将此 class 添加到您的图像元素来使您的图像响应：.img-responsive.

因此，您的图像在 html 中看起来像这样：

<img class="img-responsive" style="height: 200px;" src="image2.jpg">

使用 bootstrap 是使您的网站具有响应能力的简单方法。

Answer 2

背景图片设置在CSS:

cols12 {
    background-image: url("image1.jpg");
}

然后您可以删除 HTML 中的第一个图像标签。

我认为您应该为 CSS 中的所有内容设置样式，但这是您的选择..

见http://www.w3schools.com/cssref/pr_background-image.asp

编辑：

如果您坚持使用内联css，那么：

<div class="row" >
    <div class="cols12" style="background-image: url('image1.jpg')">
        <img style="height: 200px;" src="image2.jpg">
        <h2>HELLOO</h2>
    </div>
</div>

或者，在 CSS 中：

background: url(image1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;

您只需进行试验 - 并使用 w3schools CSS 参考。

如何使用 html 在背景图像上插入图像？但它应该是有反应的

How to insert an image over a background image using html? But it should be responsive

html

css

background-image