如何停止覆盖以覆盖内容并使其仅覆盖背景？

Question

我使用::before 作为覆盖，但我面临一个问题，即覆盖覆盖所有卡片，包括内容（文本），但我只想覆盖卡片的背景。由于这个问题，我无法选择任何文本。

/* left-to-right effect box */
.ltr-effect {
    position: relative;
}
.ltr-effect::before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color:rgba(215, 227, 250, 0.53);
    transition: width 0.5s;
}
.ltr-effect:hover::before {
    width: 100%;
}

/* card */
.service-content-box {
    text-align: center;
    border: 2px solid rgb(208, 228, 228);
    background-color: #22beff;
    border-radius: 10px;
    padding: 30px;
    font-size: 1.3em;
    width: calc(90%/3);
    margin-right: 5%;
    position: relative;
}
/* content of services */
.service-content-box .service-title {
    text-transform: capitalize;
    margin-bottom: 10px;
    font-size: 2em;
}
.service-content-box .service-desribtion {
    line-height: 30px;
}
.service-content-box a {
    margin: 7px 0px;
    text-decoration: none;
    text-transform: capitalize;
}

 <section class="services">
  <div class="services-content">
    <div class="service-content-box ltr-effect">
      <i class="fa fa-solid fa-book-open"></i>
      <h4 class="service-title mg-b-10">fast reading</h4>
      <p class="service-desribtion">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A fugiat, ea et iure similique nesciunt Et accusantium                              magni
      </p>
      <a href="#" class="read-more">learn more</a>
    </div>
    <div class="clear"></div>
  </div><!-- /.services-content -->
    </section><!-- /.services -->

Answer 1

您可以为卡片中不想用叠加层覆盖的元素设置position: relative; z-index: 1;。

您需要 z-index 才能使它们出现在前面，并且您可能已经知道，z-index 仅适用于非静态位置。这就是我使用该相对位置的原因。

/* left-to-right effect box */
.ltr-effect {
  position: relative;
}
.ltr-effect::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 100%;
  background-color: rgba(215, 227, 250, 0.53);
  transition: width 0.5s;
}
.ltr-effect:hover::before {
  width: 100%;
}

/* card */
.service-content-box {
  text-align: center;
  border: 2px solid rgb(208, 228, 228);
  background-color: #22beff;
  border-radius: 10px;
  padding: 30px;
  font-size: 1.3em;
  width: calc(90% / 3);
  margin-right: 5%;
  position: relative;
}
/* content of services */
.service-content-box .service-title {
  text-transform: capitalize;
  margin-bottom: 10px;
  font-size: 2em;
  position:relative;
  z-index:1;
}
.service-content-box .service-desribtion {
  line-height: 30px;
  position:relative;
  z-index:1;
}
.service-content-box a {
  margin: 7px 0px;
  text-decoration: none;
  text-transform: capitalize;
  position:relative;
  z-index:1;
}

<section class="services">
  <div class="services-content">
    <div class="service-content-box ltr-effect">
      <i class="fa fa-solid fa-book-open"></i>
      <h4 class="service-title mg-b-10">fast reading</h4>
      <p class="service-desribtion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A fugiat, ea et iure similique nesciunt Et accusantium magni
      </p>
      <a href="#" class="read-more">learn more</a>
    </div>
    <div class="clear"></div>
  </div>
</section>