divの外にオーバーフローした背景画像

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> 

あなたが ".bg" とオーバーフロー隠しの親との相対位置を設定する必要が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

。それがあなたのために働くかどうか私に教えてください。

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。