为什么我的背景图片会覆盖容器？

Question

我有一个图像，当您滚动它时，它的左上角到图像中心出现了一个边界。 我在该部分添加了背景图像，它涵盖了该效果。 在我在 about class 标签中添加背景图像之前，我的设计工作正常。 我也在使用引导程序，所以也许这可能会干扰某些事情？

.about {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("img/sanfrancisco.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
}

.about-img__container {
  position: relative;
}

.about-img__container::before {
  content: "";
  position: absolute;
  top: -24px;
  top: -1.5rem;
  left: -27.2px;
  left: -1.7rem;
  width: 100%;
  height: 100%;
  outline: 8px solid #0000ff;
  outline: 0.5rem solid #0000ff;
  z-index: -1;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}

.about-img__container:hover:before {
  top: 0;
  left: 0;
}

.about-banner {
  color: #fff;
}

.about-banner-two {
  color: #0000ff;
}

<section class="about py-5" id="about">
<div class="container">
 <div class="row">
    <div class="col-10 mx-auto col-md-6 my-5">
    <h1 class="text-capitalize about-banner">
      About <strong class="about-banner-two">us</strong>
    </h1>
    <p class="my-4 text-muted w-75">I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
    </p>
  </div>
  <div class="col-10 mx-auto col-md-6 my-5 align-self-center">
   <div class="about-img__container">
    <img src="img/710-DC.jpg" class="img-fluid" alt="" />
   </div>
  </div>
 </div>
</div>

<div class="row ">
  
  <div class="col-md-12 text-center my-3 text-muted">
    <i class="fas fa-truck-moving"></i>
    <h6 class="text-uppercase my-3 mission-title">Our Mission</h6>
    <p class="w-75 mx-auto text-left mission-text">I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
    </p>
  </div>
</div>

<div class="row">
  <div class="col-md-12 text-center my-3 text-muted">
    <i class="fas fa-binoculars"></i>
    <h6 class="text-uppercase my-3 mission-title">Our Vision</h6>
    <p class="w-75 mx-auto text-center mission-text">I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
    </p>
  </div>
</div>

</div>

Answer 1

更改.about-img__container::before伪元素的z-index 。 给它一个正值，比如 1 或更多。 这将解决您的问题