背景圖像溢出格

我想要在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); 



    }

來源

2016-05-03 Franco

你有沒有嘗試給bg類添加max-width和max-height屬性？ –

我已經@DhavalChheda，但它與移動網站的響應速度（使用Bootstrap） – Franco

這隻需使用bootstrap jumbotron類即可輕鬆實現。那麼你可以將jumbotron css背景設置爲任何東西。 – claudios

您需要的相對位置設置爲「.bg」和溢出隱藏的父。請讓我知道這對你有沒有用。

來源

2016-05-03 05:10:14

檢查並嘗試下面的代碼。希望它可以幫助並給你一個想法。

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。

來源

2016-05-03 05:35:33 claudios

背景圖像溢出格

回答

相關問題