有没有办法将文本放在“之前”伪元素上？

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;
}

工作演示：

.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;
}