Question

我试图使div具有特定大小的背景颜色，但每当我将位置绝对放在div内的内容时，它就会删除背景颜色。

这是我想要做的事情的图像：

[！[在此处输入图像说明] [1]] [1]

＆＃13;

* {
  font-family: 'Poppins', sans-serif;
}
    
    
.background {
  position: relative;
  background: #DFEDFF;
  height: 100%;
  width: 100%;
}
    
.hero-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
    
.title {
  font-size: 8.4375rem;
  font-weight: 800;
  line-height: 130px;
  margin: 0;
}
    
.description {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 300;
}

＆＃13;

<div class="background">
      <div class="hero">
        <div class="hero-text">
          <h1 class="title">Hello,<br>I'm Ian</h1>
          <p class="description">Website coming soon.</p>
        </div>
        <img class="callum" src="images/callum.png" alt="">
      </div>
    </div>

＆＃13;

Answer 1

当你制作一个元素position:absolute;时，它的宽度/高度将不再影响它的父元素的宽度和高度。如果没有指定设定高度，则div的高度由其子项定义（100％不起作用，这对你来说只是css魔法）。

如果没有孩子给它一个高度（因为它已被打折，因为它现在是position:absolute;）你需要为你的div设置一个特定的px高度，例如height:100px

Answer 2

我将min-height应用于main_container 410px，然后设置绝对值，背景div和英雄文本，英雄文本设置在中心就像你已经做的那样然后将100px设置为背景，这样它将开始设置背景，留下100px空间，顶部：10px，底部：10px，右边：10px等等....

＆＃13;

.main_container{
  min-height:410px;
  width:100%;
  position:relative;
}

.title {
  font-size: 8.4375rem;
  font-weight: 800;
  line-height: 130px;
  margin: 0;
}

.description {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 300;
}

.background{
  position:absolute;
  top:10px;
  bottom:10px;
  left:100px;
  right:10px;
  content:'';
  display:block;
  background:#DEEDFE;
  z-index:-1;
}

.hero-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="main_container">
<div class="background"></div>
    <div class="hero-text">
      <h1 class="title">Hello,<br>I'm Ian</h1>
      <p class="description">Website coming soon.</p>
    </div>
</div>

＆＃13;

Answer 3

https://jsfiddle.net/3pL5srvq/1/

背景将通过英雄文字自动增长高度。

calc(25% - 4rem)表示通过填充空间（3rem）+平衡高度向上居中和偏移顶部的位置，我只需设置为1rem

25％到中心
-4rem（移除填充顶部空间（3rem）+平衡偏移顶部（1rem））

* {
  font-family: 'Poppins', sans-serif;
}
    
    
.background {
      position: relative;
    background: #DFEDFF;
    width: 80%;
    margin: 0 auto;
}

.hero-text {
    transform: translate(-5% , calc(25% - 4rem));
    padding: 3rem 0;
}

p.description {
    margin: 0;
}

<div class="background">
      <div class="hero">
        <div class="hero-text">
          <h1 class="title">Hello,<br>I'm Ian</h1>
          <p class="description">Website coming soon.</p>
        </div>
        <img class="callum" src="images/callum.png" alt="">
      </div>
    </div>

如何将div背景颜色设置为具有绝对位置的内容？

3 个答案: