我需要禁用文本后面的背景色

Question

我正在使用Css3。我正在尝试学习如何实现div透明背景，以便我可以看到位于其后面的div的背景图像。（背景色：透明！重要=

html代码:

     <div>
        <div className='body'>
          <div>
            <h1>Some title</h1>
          </div>
          <div /> // here is set the background image
        </div>
        <div className='text'>
          Pellentesque habitant morbi tristique senectus et netus et
          malesuada fames ac turpis egestas. Pellentesque arcu. Ut tempus
          purus at lorem. Nam quis nulla. Aenean placerat. Mauris suscipit,
          ligula sit amet pharetra semper, nibh ante cursus purus, vel
          sagittis velit mauris vel metus. Fusce tellus. Praesent id justo
          in neque elementum ultrices. Sed ut perspiciatis unde omnis iste
          natus error sit voluptatem accusantium doloremque laudantium, totam.

          architecto beatae vitae dicta sunt explicabo. Nulla est. Curabitur
          bibendum justo non orci. Aenean placerat. Praesent in mauris eu tortor
          porttitor accumsan. Maecenas libero. Phasellus enim erat, vestibulum
          vel, aliquam a, posuere eu, velit. Etiam commodo dui eget wisi. Fusce
          dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nemo enim
        </div>
      </div>

代码：

.body {
    display: flex;

    div {          
      &:first-child {
        flex-basis: 45%;        

        h1 {
          font-size: 48px;
        }
        h4 {
          text-transform: uppercase;
          color: #0F33FF;
        }
      }
      
      &:nth-child(2) {
        flex-basis: 55%;
        background-image: url('../img/notebook-smaller.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
        
      }      
    }
  }


.text {
  background-color: transparent !important;
}

Answer 1

最佳实践用于文本特定标记（H1、p>等等），因为它对SEO很有用。

断续器

.body {
    display: flex;
    flex-wrap: wrap;
    position: relative
    
    h1 {
        wdith: 100px;
        font-size: 48px;
    }

    .image {
        width: 100%;
        height: 400px;
        background-image: url("https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg");
        background-repeat: no-repeat;
    }
    .text {
        position: absolute;
        background-color: transparent !important;
        column-count: 2;
        bottom: 0px;
    }
}

断续器

  <div class='body'>
  <h1>Some title</h1>
  <div class="image"></div>
  <div class='text'>
    Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Pellentesque arcu. Ut tempus
    purus at lorem. Nam quis nulla. Aenean placerat. Mauris suscipit,
    ligula sit amet pharetra semper, nibh ante cursus purus, vel
    sagittis velit mauris vel metus. Fusce tellus. Praesent id justo
    in neque elementum ultrices. Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium, totam.
    architecto beatae vitae dicta sunt explicabo. Nulla est. Curabitur
    bibendum justo non orci. Aenean placerat. Praesent in mauris eu tortor
    porttitor accumsan. Maecenas libero. Phasellus enim erat, vestibulum
    vel, aliquam a, posuere eu, velit. Etiam commodo dui eget wisi. Fusce
    dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nemo enim
  </div>
</div>

例

Answer 2

1. 文本的背景颜色默认为透明或inherit。这意味着您可以将白色背景色应用于文本，这就是为什么您看到白色背景色的原因，无论如何，您可以使用背景色：透明！重要删除背景
2. 其次，我设置了容器的相对位置和文本的绝对位置。这也很有帮助

.container {
  position: relative;
  top: 0;
  left: 0;
  width: 300ox;
  height: 300px;
  background: url(https://picsum.photos/300/300) center/cover no-repeat;
}

.container p {
  color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  /* The background-color of a text is transparent or inherit by default */
  background-color: transparent !important
}

<section class='container'>
  <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available</p>
</section>