主页 / 问题 / 1017879
Accepted
Андрей
Asked:2020-08-27 21:47:55 +0000 UTC2020-08-27 21:47:55 +0000 UTC

覆盖背景时更改文本颜色

  • 772

有这个代码：

.col {
  margin-left: 50%;
  background-color: #000;
  height: 500px;
  width: 500px;
  position: absolute;
  top: 0;
}
.text {
font-size: 40px;
}
<section>

  <div class="row">
    <div class="col s6 offset-s6 bg_black"></div>
  </div>

  <div class="container">
    <div class="row">
      <div class="text">
        Я большой кусок текста
      </div>
    </div>
  </div>

</section>

文本是白色背景上的黑色，但页面右侧填充了深色背景。根据屏幕大小，一些文本位于背景之上。这部分文本究竟如何才能变成白色？我尝试了混合混合模式，不同色调的灰色，但没有办法使文本变白。

css

1 个回答

  1. Best Answer

    .col {
  margin-left: 50%;
  background-color: #000;
  height: 500px;
  width: 500px;
  position: absolute;
  top: 0;
}
.row {
  background:linear-gradient(to left, black 30%, white 30%);      
}
.text {
font-size: 40px;
mix-blend-mode:difference;
  color:white;
  padding-left: 180px
}
    <section>
  <div class="row">
    <div class="col s6 offset-s6 bg_black"></div>
  </div>

  <div class="container">
    <div class="row">
      <div class="text">
        Я большой кусок текста
      </div>
    </div>
  </div>
</section>

    • 4

相关问题