时间戳

首页 > 解决方案 > 使用 z-index 但文本仍然没有出现在前面

html - 使用 z-index 但文本仍然没有出现在前面

问题描述

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

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

标签： htmlcss

解决方案

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

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

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

推荐阅读