时间戳

首页 > 解决方案 > CSS：文本不可见

css - CSS：文本不可见

问题描述

我们有 CSS .block.block-dark h2 {color: #ffba0d;}，但下面的 h2 和 p 都是不可见的。

他们所在的z-indexdiv 比他们前面的具有背景颜色 ( <div class="column-overlay block-dark" style="opacity: 90%"> </div>) 的 div 高。

我不明白为什么背景颜色显示在 div 的顶部，其中包含文本。

帮助表示赞赏。

.column-bg-img {background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');}
.block .block-background-image.bg-scroll {
    background-attachment: scroll;
}
.block .block-background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.block .block-background-image, .block-overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.columns_block .column-bg-img, .columns_block .column-overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}
.columns_block .column-overlay.block-dark {
    background-color: #2d3133;
}
.block.block-dark h2, .block.block-white h2, .carousel_block .carousel .carousel-inner .carousel-item .carousel-caption .carousel-caption-inner h3 {
    color: #ffba0d;
}
@media (min-width: 1200px) {
.col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
}
<div class="container-wrapper block columns_block block-dark">
  <div class="block-overlay" style="opacity: 90%"></div>
  
  <!-- columns-block.twig -->
  <div class="block-background-image bg-scroll" style="background-image: url('');"></div>
  <div class="container-fluid">
    <div class="row" data-scroll="in">
      <div class="col-12 col-xl">
        <div class="column-bg-img" style="background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');"></div>
        <div class="column-overlay block-dark" style="opacity: 90%"> </div>
        <div class="column">
          <h2 style="text-align: center;">Residential</h2>
          <p style="text-align: center;">We’ve been installing, servicing, and repairing air conditioning systems in people’s homes for decades.<br>
            Our experience and expertise allows us to offer the ideal air conditioning system for you</p>
        </div>
      </div>
      <div class="col-12 col-xl">
        <div class="column-bg-img" style="background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Commercial_Air_Conditioning.jpg');"></div>
        <div class="column-overlay block-dark" style="opacity: 90%"> </div>
        <div class="column">
          <h2 style="text-align: center;">Commercial</h2>
          <p style="text-align: center;">We install air conditioners for commercial and industrial buildings,<br>
            and are able to offer systems tailored to the exact needs of your business.</p>
        </div>
      </div>
    </div>
  </div>
</div>

标签： css

解决方案

这是因为<div>持有文本的元素没有z-index属性，而<div>持有背景的元素有z-index:0属性。尝试添加此 css 规则。

.column {
  position: relative;
  z-index: 2;
}

推荐阅读