背景图像溢出格

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

背景图像溢出格

回答

相关问题