Question

我想在我的网页上设置一个具有固定背景和渐变叠加的部分，以便文本可读。问题是背景只覆盖前10个像素或类似的东西。高度不会自动调整到容器的大小。如果我放入高度：200px等它可以工作，但我只是想它自动调整内容。

它只显示背景的小条：Picture

HTML：

<section id="random" class="random">
<div class="content-wrap">


<div class="col-50-1">
<h2>Festivals</h2>
<p>
Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra 
fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut 
purus. Mauris consectetur posuere ante, ullamcorper iaculis enim interdum 
vulputate. Duis finibus neque lectus. Nullam ligula libero, facilisis eget  
suscipit mi ullamcorper. Fusce ut sodales velit. Phasellus auctor ligula
</p>
</div>

<div class="col-50-2">
<h2>Uitgaan</h2>
<p>
Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra 
fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut  
Fusce ut sodales velit. Phasellus auctor ligula est.
</p>
</div>
</div>
</section>

CSS：

.random {
height:auto;
background: linear-gradient(rgba(141, 153, 174, 0.8), 
rgba(141, 153, 174, 0.5)),
url(https://static.pexels.com/photos/196652/pexels-photo-196652.jpeg) 
no-
repeat fixed;
background-size: cover;
}

Answer 1

您提供的代码确实有效（请参阅代码段）。基于图像，虽然我想知道你是否有其他可能干扰的代码，特别是如果你有

.content-wrap {
  background: #fff;
}

我还会使用background-origin和background-position声明，以确保图像的位置相对于它应该落后的区域是正确的。

.random {
  height:auto;
  background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url(https://static.pexels.com/photos/196652/pexels-photo-196652.jpeg) no-repeat fixed;
  background-size: cover;
}

<section class="random" id="random">
  <div class="content-wrap">
    <div class="col-50-1">
      <h2>Festivals</h2>
      <p>Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut purus. Mauris consectetur posuere ante, ullamcorper iaculis enim interdum vulputate. Duis finibus neque lectus. Nullam ligula libero, facilisis eget suscipit mi ullamcorper. Fusce ut sodales velit. Phasellus auctor ligula</p>
    </div>
    <div class="col-50-2">
      <h2>Uitgaan</h2>
      <p>Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut Fusce ut sodales velit. Phasellus auctor ligula est.</p>
    </div>
  </div>
</section>

背景高度不会自动调整到容器

1 个答案: