html - css - img maxed 不工作

Question

我现在使用 css 已经有一段时间了。我试过这段代码，但 ID 为“backInvis”的 div 是一张图片。

#PageOne {
background-color: #230f2e;
}
#PageTwo {
    background-color: #2e0f29;
}
#PageThree {
    background-color: #140f2e;
}
#backInvis {
    z-index: -5;
    opacity: 0.75;
    width: 100%;
    background-color: #ff6600;
}

<div id="PageOne">
<div id="backInvi">.</div>
</div>

<div id="PageTwo">
<div id="backInvi">.</div>
</div>

<div id="PageThree">
<div id="backInvi">.</div>
</div>

现在我知道在没有元素的情况下将 div 设置为特定高度是一个问题(如果有人可以帮助我，那将是一个很好的选择)。但是当我放一张图片时，宽度通常比我的窗口大。当我删除 (width: 100%;) 时，我得到了相同的图像。什么问题。

Answer 1

我将在不完全理解您使用这段代码的目的的情况下尝试回答这个问题。

如果您指的是以下内容

<div id="backInvi"><img src="images/whatever.jpg"></div>

那么你的 css 需要如下...

#backInvis {
    z-index: -5;
    opacity: 0.75;
    width: 100%;
    background-color: #ff6600;
}

#backInvis img { float: left; width: 100%; height: auto; }

如果这不是您想要做的，请澄清代码并将其更新为您实际想要的样子。