html - CSS制作:before element inherit size (491th time)

Question

嘿，这个问题每年至少被问三次，但我尝试的都没有用。 JSFiddle link

我想要一个透明的背景框，所以我选择了 :before ，除了我需要静态输入高度外，它可以工作。网页向下滚动多个页面，每个浏览器/屏幕尺寸呈现不同，所以我想找到一种方法来自动使 :before 元素继承 div 的高度:before “targeted”(抱歉语言不好但是我对网络开发一无所知)。

我可以输入更多，但是 20 行的 JSFiddle 是不言自明的，像人们建议的那样放置 position: relative 并删除高度/宽度属性使得 :before 完全消失，我没有知道还能做什么。

body {
  margin: 0;
  padding: 0;
  background: #ff0000;
  font-family: 'Open Sans', sans-serif;
  background: #dccbff;
  color: #ffffff;
}
#content {
  color: #ffffff;
}
#content:before {
  content: "";
  display: block;
  position: absolute;
  /* people say I should put
                         relative here but then
                         the whole box disappears */
  height: 43px;
  width: 100%;
  /* removing height and width also makes the box
    disappear. I'd love to use something like "auto"
    or "100%" but the page is scrollable so I need
    the :before element to be resized dynamically */
  opacity: .4;
  z-index: -1;
  background: #000;
}

<div id="main">
  not readable
  <br>
  <br>
  <div id="content">
    so I want this to be on a darker background that dynamically changes its size with the size of "content"
    <br>but as you see it only does it until here
  </div>
</div>

Answer 1

基本上你想要这样的东西:

body {
  margin: 0;
  padding: 0;
  background: #ff0000;
  font-family: 'Open Sans', sans-serif;
  background: #dccbff;
  color: #ffffff;
}
.content {
  color: #ffffff;
  position: relative;
  margin-bottom: 10px;
}
.content:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: .4;
  z-index: -1;
  background: #000;
}

<div id="main">
  <div class="content">so I want this to be on a darker background that dynamically changes its size with the size of "content"
  </div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil unde hic aut mollitia molestias provident, velit ipsam itaque, earum dolorum expedita magnam, architecto accusamus neque asperiores aliquam atque natus doloribus officia dolores. Velit
    nam dignissimos aut nobis earum quasi dolores dolorum, quidem veniam harum ipsam mollitia, assumenda, cupiditate consectetur. Blanditiis!
  </div>
</div>

JSfiddle Demo