Html 有没有一种方法可以将文本置于“文本”之上；“之前”；伪元素？ .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%; z-index:-1; }

一般来说，我对html和css比较陌生，但我尝试在渐变背景上获取标题和段落文本，这样更清晰。我确信我遗漏了一些简单的东西，非常感谢您的帮助：）

代码笔：

---

您可以为before pesudo元素指定z索引值 .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%; z-index:-1; } .琼伯伦：：之前{ 背景：rgba（0,0,0,0）-webkit线性渐变（右上角， rgba（203,67152.7）0%，rgba（100190235.7）100%重复滚动0； 背景：rgba（0,0,0,0）-moz线性渐变（右上角， rgba（203,67152.7）0%，rgba（100190235.7）100%重复滚动0； 背景：rgba（0,0,0,0）-o-线性梯度（右上角， rgba（203,67152.7）0%，rgba（100190235.7）100%重复滚动0； 背景：rgba（0,0,0,0）线性渐变（右上角， rgba（203,67152.7）0%，rgba（100190235.7）100%重复滚动0； 内容：“； 显示：块； 身高：100%； 左：0； 位置：绝对位置； 排名：0； 宽度：100%； z指数：-1； }

---

您只需要为

.container

元素提供一个非静态的定位，它自然会出现在前面

现在，您的

.jumbotron:：before

设置为

位置：绝对

，并且由于

.container

（其同级）未定义非静态位置，因此它显示在它的后面

我在CSS的末尾添加了以下内容：

.container {
  position: relative;
}

工作演示：

.jumbotron{
显示器：flex；
对齐项目：居中；
背景：url（'https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+工作+unsplash.com.jpg？格式=1500w’；
高度：40雷姆；
背景尺寸：封面；
背景重复：无重复；
背景位置：中底；
位置：相对位置；
}
.container{}
.琼伯伦：：之前{
背景：rgba（0,0,0,0）-webkit线性渐变（右上角，rgba（203,67152,7）0%，rgba（100190235,7）100%）重复滚动0；
背景：rgba（0,0,0,0）-moz线性渐变（右上角，rgba（203,67152,7）0%，rgba（100190235,7）100%）重复滚动0；
背景：rgba（0,0,0,0）-o线性梯度（右上角，rgba（203,67152,7）0%，rgba（100190235,7）100%）重复滚动0；
背景：rgba（0,0,0,0）线性渐变（右上角，rgba（203,67152,7）0%，rgba（100190235,7）100%）重复滚动0；
内容：“；
显示：块；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
朱博龙h2{
字体系列：“蒙特塞拉特”，无衬线；
颜色：#ffffff；
字号：8rem；
字号：500；
文本对齐：居中；
}
琼博特伦p{
字体系列：“蒙特塞拉特”，无衬线；
颜色：#ffffff；
字号：8rem；
字号：200；
文本对齐：居中；
}
.集装箱{
位置：相对位置；
}

你好
欢迎参加内部销售

Use可以在css中使用z-index属性来更改元素显示的图层

---

我使用了

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

或

这并没有达到预期的效果，并且隐藏了渐变。您也可以为您的容器提供z-index.jumbotron.container{z-index:999999；}Jon-您知道为什么my.jumbotron p也没有格式化吗？我一直试图改变尺寸，但它不会改变。。。。再次感谢您的帮助和专业知识！
.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);
}