css元素的背景和文字颜色内容颜色混合mix-blend-mode

mix-blend-mode:是 CSS 的一个属性，用于控制元素的内容如何与其背景或父元素的内容混合。它类似于 Photoshop 中的图层混合模式，可以实现各种视觉效果，如叠加、滤色、变暗等。

 

<html>
  <style>
  .background {
    background-image: url('2.jpg');
    background-size: cover;
    background-position: center;
  }
  
  .text {
    background-color: rgba(0, 0, 0, 0.1); /* 半透明背景 */
    color: white; /* 或者其他颜色 */
    mix-blend-mode:overlay; /* 结合 multiply 和 screen，增强对比度 */
  }

  .text-element {
    /* 双重阴影增强对比（深色外阴影+浅色内阴影） */
    text-shadow: 
      1px 1px 3px rgba(0,0,0,0.8), 
      -1px -1px 2px rgba(255,255,255,0.5);
    
    /* 智能混合模式（根据背景自动反色） */
    mix-blend-mode: difference;
    color: white; /* 基础文字颜色 */
    
    /* 半透明背景容器（增强可读性） */
    display: inline-block;
    padding: 0.2em 0.5em;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;

    width: 100%;
    height: 500px;
  }
   
  </style>
  <body>
      <div class="background">
          <div class="text">
            <p>242545454dfsdfsfdfsdfsdfsdfsdfsdfsdf</p>
            <div>sdfsdfsdfsdfsdfsdfsdfsdf</div>      
            <p>242545454545sdfsdfsfdfsdfsdfsdfsdfsdfsdf</p>
            <div>sdfsdfsfdfsdfsdfsdfsdfsdfsdf</div>
          </div>
      </div>
  </body>

</html>

 

把文字和背景颜色混合，防止因为背景和文字颜色一直时，文字无法看到.

 

posted @ 2025-06-06 09:15  与f  阅读(83)  评论(0)    收藏  举报