Question

我使用的是z-index，但我的文字仍然没有超过我在bg中的色调。我对编码很陌生，所以如果我做错了，我很抱歉。任何帮助将不胜感激。

＆＃13;

.parallax { 
    /* The image used */
    background-image: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg");
    /* Set a specific height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-tint {
position: relative;
		}
 .bg-tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(56,56,56, 0.9);
  transition: all .3s linear;
	 z-index: 2;
}
.bg-tint .content h3 {
	z-index: 6;
}

＆＃13;

<div class="parallax bg-tint">

<div class="content">
	<h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>
	<p>We cover most English speaking countries, including yours!</p>
</div>

</div>

＆＃13;

Answer 1

将z-index:3和position:relative添加到.content。

＆＃13;

.parallax { 
    background: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg") center center no-repeat; 
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}
.bg-tint {
position: relative;
		}
 .bg-tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(56,56,56, 0.9);
  transition: all .3s linear;
	 z-index: 2;
}
.bg-tint .content  {
position:relative;
	z-index: 3;
}
.bg-tint .content h2 {

}

＆＃13;

<div class="parallax bg-tint">

<div class="content">
	<h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>
	<p>We cover most English speaking countries, including yours!</p>
</div>

</div>

＆＃13;

Answer 2

把你的容器：放在z-index之前：-1

.parallax { 
        /* The image used */
        background-image: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg");
        /* Set a specific height */
        height: 100%; 

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index:-1;
    }
    .bg-tint {
    position: relative;
z-index:1;
    		}
     .bg-tint:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(56,56,56, 0.9);
      transition: all .3s linear;
    	 z-index:-1;
    }
    .bg-tint .content h3 {
    }

<div class="parallax bg-tint">

    <div class="content">
    	<h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>
    	<p>We cover most English speaking countries, including yours!</p>
    </div>

    </div>

使用z-index但文本仍未出现在前面

2 个答案: