Question

我希望bg中声明的图像适合container-fluid，但它会溢出。有关实时情况，请参阅https://www.soundshelter.net/。

目标是让文字位于图片顶部，因此opacity和blur可以应用于图片，而不会影响文字。

我尝试使用overflow:hidden;，但这被忽略了。

编辑：如果我删除背景图片并改为使用background-color，这也存在。

<div class="container-fluid">
   <div class="bg"></div>
   <div class="row hero_header">
      <h1>test</h1>
    </div>
</div>

CSS

.bg /*this is the background image*/
  {
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url("/images/record_wall_orig_two.jpg") 0px 0px;
      background-size:cover;
      height:100vh;
      background-color: black;
      -webkit-filter:  blur(8px); / Chrome, Safari, Opera /
      filter:  blur(8px);



  }

Answer 1

您需要设置相对于“.bg”父级的位置并隐藏溢出。让我知道它是否适合你。

Answer 2

检查并尝试以下代码。希望它可以帮助并给你一个想法。

HTML：

<div class="jumbotron">
      <div class="container">
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
      </div>
    </div>

CSS：

.jumbotron {
  background: url("https://static.pexels.com/photos/28209/pexels-photo-28209-large.jpg") center;
  background-color: black;


}

p {
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

工作fiddle。

背景图像溢出div

2 个答案: