总的来说，我对html和css相对较新，但我试图将标题和段落文本放在渐变背景上方，因此更清晰。我确定我缺少一些简单的东西，任何帮助都值得赞赏:)
代码笔：https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron {
display: flex;
align-items: center;
background: url('https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+working+unsplash.com.jpg?format=1500w');
height: 40rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.jumbotron h2 {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 500;
text-align: center;
}
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 200;
text-align: center;
}
你只需要给你的.container元素一个非静态的定位，它自然会走到前面。
现在，您的.jumbotron::before设置为position: absolute，并且由于.container(其同级(没有定义非静态定位，因此它显示在它后面。
我已将其添加到您的 CSS 末尾：
.container {
position: relative;
}
工作演示：
.jumbotron {
display: flex;
align-items: center;
background: url('https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+working+unsplash.com.jpg?format=1500w');
height: 40rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.container {}
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.jumbotron h2 {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 500;
text-align: center;
}
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 200;
text-align: center;
}
.container {
position: relative;
}<link href="https://fonts.googleapis.com/css?family=Montserrat:200,500" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="jumbotron">
<div class="container">
<h2>hello!</h2>
<p>welcome to inside sales</p>
</div>
</section>您可以在 pesudo 元素之前赋予 z 索引值
.jumbotron：：在 { 背景： RGBA(0， 0， 0， 0( -webkit-linear-gradient(右上， RGBA(203,67,152，.7( 0%， RGBA(100,190,235，.7( 100%( 重复滚动 0 0; 背景： RGBA(0， 0， 0， 0( -moz-linear-gradient(右上， RGBA(203,67,152，.7( 0%， RGBA(100,190,235，.7( 100%( 重复滚动 0 0; 背景： RGBA(0， 0， 0， 0( -o-linear-gradient(右上， RGBA(203,67,152，.7( 0%， RGBA(100,190,235，.7( 100%( 重复滚动 0 0; 背景： RGBA(0， 0， 0， 0( 线性渐变(右上， RGBA(203,67,152，.7( 0%， RGBA(100,190,235，.7( 100%( 重复滚动 0 0; 内容："; 显示：块; 高度： 100%; 左： 0; 位置：绝对; 顶部： 0; 宽度： 100%; Z指数：-1; }
我用了transform: translate3d(0px, 0px, 0px);
我有一个这样的结构：
.blog-header {
position: relative;
...
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../static/shape.svg");
background-size: cover;
opacity: 0.6;
}
&__breadcrumb {
transform: translate3d(0px, 0px, 0px);
...
}
}
或
.blog-header {
position: relative;
...
}
.blog-header::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../static/shape.svg");
background-size: cover;
opacity: 0.6;
}
.blog-header__breadcrumb {
...
transform: translate3d(0px, 0px, 0px);
}
用户 可以使用 css 中的 z-index 属性来更改显示元素的图层。
Z 索引
.jumbotron container {
z-index: 2000;
}