Jumbotron背景图像不住在Jumbotron内

我有一个背景图像和文本在它上面的Jumbotron。我需要背景图像具有较低的不透明度（以便顶部的文本可读），所以我们需要在“after”伪元素上设置背景图像，正如该主题上的一些帖子所建议的那样。Jumbotron背景图像不住在Jumbotron内

问题是背景图像不在jumbotron div的边界内（实际图像比jumbotron div更高/更宽，我希望浏览器调整大小以保持jumbotron div - 而不是图像溢出到下面的div）。

这里是我的CSS：

.jumbotron{ 
    background:transparent; 
    padding-bottom: 0px; 
    margin-bottom:15px; 
} 

.jumbotron:after{ 
    background-image: url(/assets/home/jumbotron_background-14b85e94838f7e237a5318b85a67a43e1ff02276069f6e48148a58eb90767f48.jpg); 
    content: ""; 
    background-size: cover; 
    background-repeat: no-repeat; 
    opacity: 0.3; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

我都试过“封面”和“100％100％”为背景的尺寸，并在这两种情况下，图像依然流溢到下面的div。

的相关HTML：

<div class="jumbotron"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="text-center">Headline Here</h1> 
     <h3 class="text-center">Secondary Headline/ Value Prop</h3> 
     <p class="text-center"> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="spacer-row"></div> 
<div class="col-xs-12 text-center"> 
    <%= link_to 'Get Started!', signup_or_dashboard, class: 'btn btn-xl btn-primary' %> 
</div> 
    </div> 
</div>

来源

2017-03-01 Katie

你缺乏两个关闭divs，一个用于jumbotron，以及一个用于容器。这可能就是为什么测试中心是由jumbotron

占领是对position:absolute必要的原因是什么？国际海事组织，:after不需要

来源

2017-03-01 05:45:11 Swellar

他们在那里，以某种方式被编辑出栈溢出代码缩进，我会更新我的原始问题中的代码，以确保它们显示。 – Katie

：之后是需要的，以便我可以在图像本身上放置不透明度，但不要放在它上面的文本。请参阅http://stackoverflow.com/questions/27959757/changing-jumbotron-opacity-and-make-it-full-width-without-affecting-the-font-并举例说明为什么 – Katie

您的代码不起作用，因为，你给background-image一个错误的值。

正确的语法： background-image: url('path to image');

它的工作原理。

来源

2017-03-01 05:51:10

这是我的原始.scss文件 - 我正在使用Rails，因此资产管道无法直接使用“网址”链接到图片。 image-url将编译到资产管道中的正确图像位置。看到http://guides.rubyonrails.org/asset_pipeline.html – Katie

现在这看起来像一个实际的问题！这可能是由于Ruby没有正确编译* SCSS *。你在这些问题上做了什么？ –

你是什么意思？ scss似乎正在编译，编译后的css :. ''background-image：url（/assets/home/jumbotron_background-14b85e94838f7e237a5318b85a67a43e1ff02276069f6e48148a58eb90767f48.jpg）;' – Katie

你的CSS

.jumbotron{ 
    padding: 0; 
} 
.jumbotron img { 
    opacity: 0.3; 
    position: absolute; 
    background-size: cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
} 
.jumbotron .container { 
    padding: 15px; 
}

你修改HTML

<div class="jumbotron"> 
    <img src="home/jumbotron_background.jpg" /> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="text-center">Headline Here</h1> 
     <h3 class="text-center">Secondary Headline/ Value Prop</h3> 
     <p class="text-center"> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta 
    felis euismod semper. 
     </p> 
     </div> 
    </div> 

    <div class="spacer-row"></div> 
    <div class="col-xs-12 text-center"> 
    <%= link_to 'Get Started!', signup_or_dashboard, class: 'btn btn-xl btn-primary' %> 
</div>

来源

2017-03-01 05:54:19

与之前相同 - 图像仍然来自jumbotron div – Katie

你能分享一个小提琴链接或截图，这样就很容易理解实际问题。 –

下面是截图https://drive.google.com/file/d/0B2K2KEyZVtWgQ1FLdkhTemw1Nm8/view?usp=sharing。正如你可以从我的原始HTML看到的那样，jumbotron div在绿色的“开始”按钮后结束，但图像正在向下推入“标题”div – Katie

大量的试验和错误后，我得到了一个有效的解决方案加入了MAX-height属性的超大屏幕：after伪元素（如果您将背景图像放在jumbotron的单独div上，而不是使用：after），相同的解决方案也可以工作。所以：

.jumbotron:after{ 
    background-image: url('home/jumbotron_background.jpg'); 
    content: ""; 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position: center center; 
    max-height: 540px; 
    opacity: 0.3; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 

}

来源

2017-03-05 01:33:57 Katie

Jumbotron背景图像不住在Jumbotron内

回答

相关问题