css - img maxed with not working

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放在一定高度而没有元素是一个问题（如果有人可以帮助我，那将是一个很好的樱桃）。但是当我放置图像时，宽度通常比我的窗口大。当我删除（宽度：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; }

如果这不是您想要做的，请澄清并更新您真正想要的代码。

Answer 2

你提出的问题根本没有任何意义。 <div>标签用于在html中创建分区或部分。它们没有任何预定义的属性，如边距，填充，字体大小和边框。必须使用css选择器定义它。分割标记内的图像将根据某些因素自动调整，直到您定义宽度和高度属性。如果您定义具有特定宽度的div标签，则图像将不会尝试从分割框中出来。如果它仍然可以在CSS中使用溢出...

div{
    width: 50%;
    max-width: 60%;
    overflow:scroll;
}

Answer 3

我也将试图回答这个问题而不完全理解你在使用这段代码的地方。

/* Use this css */

body {
  margin: 0;
  padding: 0;
}

#PageOne {
  position: relative;
  top: 0px;
  background-color: #230f2e;
}

#PageOne .backInvis {
  position: relative;
  top: 18px;
  z-index: -5;
  opacity: 0.75;
  width: 100%;
  background-color: #fa45ed;
}

#PageTwo {
  position: relative;
  top: 18px;
  background-color: #2e0f29;
}

#PageTwo .backInvis {
  position: relative;
  top: 18px;
  z-index: -5;
  opacity: 0.75;
  width: 100%;
  background-color: #fa45ed;
}

#PageThree {
  position: relative;
  top: 36px;
  background-color: #140f2e;
}

#PageThree .backInvis {
  position: relative;
  top: 18px;
  z-index: -5;
  opacity: 0.75;
  width: 100%;
  background-color: #fa45ed;
}

<!-- Use this Html -->


<div id="PageOne">
  <div class="backInvis">.</div>
</div>

<div id="PageTwo">
  <div class="backInvis">.</div>
</div>

<div id="PageThree">
  <div class="backInvis">.</div>
</div>

首先，你永远不会在同一页面中多次使用同一个id .....

如果这不是您想要做的，请澄清并更新您真正想要的代码。