img 标签不允许重叠答案

【问题标题】：img tag not allowing overlapimg 标签不允许重叠
【发布时间】：2018-01-25 22:53:40
【问题描述】：

所以我尝试使用 img 标签在 html/css 中制作背景 img，但我的 img 标签不允许事物重叠，当我尝试使用 div 类元素时，它不会延伸到边缘即使宽度为 100% 的页面。这是我的css和html。

 .backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
} 

.img{
z-index:0;
}

.img-responsive{
 height:auto; 
 width:100%
}

这是我尝试过的两种方法：

<img src="../images/mainBackground.jpeg" class="shadow-offset   img-responsive"/> 

<div class="backgroundImage">

除页脚之外的所有内容都以 div 结尾

我有容器，但它们都没有在任何容器中，因为它们在我使用容器之前从页面顶部开始。

【问题讨论】：

标签： html css twitter-bootstrap image

【解决方案1】：

将所有 html 包装在 <html> 标记中，然后使用以下 css：

html {
   background-image: url("image/url.png");
}

【讨论】：

不走运。图像完全消失。@TheOneWhoMade
是的。与我在 css 中使用的其他相同，效果很好。
还是没有运气。我在js小提琴中试过。背景一直有效，直到我引入引导依赖项.. @TheOneWhoMade
您可能必须使用您的其他 html，然后将其用作模板并将您的内容放在其他内容所在的位置。 @ebraun99
让我们continue this discussion in chat.

【解决方案2】：

我假设您要做的只是向您的 div 添加背景图片 - 您的解释有点不清楚。您只需要以下内容：

// html
<div class="backgroundImage">...</div>

// css
.backgroundImage {
  background-image: url('/images/mainBackground.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

div 元素默认为 display:block，这意味着它应该是 100% 宽度。除非您的标记中有您没有向我们展示的内容，否则无需添加 width: 100%。此外，div 也会根据其内容自动改变高度。在这种情况下，使用background-size:cover 将允许背景图像调整大小并填充 div，而不管大小。

除非...您在 div 中浮动内容。然后你需要一个明确的，像这样：

// html
<div class="backgroundImage clear">...</div>

// css
.clear::after {
   content: '';
   display: table;
   clear: both;
}

【讨论】：

封面不是我想要的。我想要一些能适应屏幕宽度并根据屏幕大小进行调整的东西。 img 标签不允许重叠，但根据我当前的 css 和 html，给我正确的大小和 div 不够宽。这有意义吗？