Question

我对html和css一般都比较新，但我试图将标题和段落文字放在渐变背景之上，所以它更清晰。我确信有一些简单的东西我很遗憾，并且感谢任何帮助：）

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

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以在pesudo元素之前给出z-index值

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

Answer 3

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

z-index

.jumbotron container {
    z-index: 2000;
}

Answer 4

我使用了 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);
}

有没有办法将文本带到＆＃34;之前＆＃34;伪元素？

4 个答案: