html - 有没有办法将文本置于 "before"伪元素之上？

Question

一般来说，我对 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;
}

Answer 1

你只需要给你的.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>