根据背景颜色分配文本颜色

Question

如果段落的背景是白色或透明，我需要为段落文本应用红色，否则为黄色（背景颜色不是白色），仅使用 CSS 或 SASS 预处理器

类似的东西：

p {
  @if $selectedP.background == white || transparent {
    color: red;
  } @else {
    color: yellow;
  }
}

提前谢谢你

Answer 1

您可以使用 @mixin 根据背景更改文本颜色。

<p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit quaerat, non rem enim commodi harum, explicabo atque reiciendis esse nemo veritatis quisquam, deserunt at et. Aspernatur maxime inventore ut laboriosam necessitatibus dicta eius fuga! Deserunt facere totam voluptatibus. Praesentium, velit! A nobis molestias maiores iste dicta qui ut, hic repudiandae.</p>
<p class="blue">Cupiditate, quam praesentium, delectus consequatur quae eos doloribus officiis aut, dignissimos porro numquam ea expedita odio quis adipisci saepe excepturi quibusdam temporibus et amet dolorem! Nisi accusantium earum quo vero reprehenderit error debitis totam natus incidunt, consequuntur harum aut at magnam! Reiciendis fugiat excepturi magnam dolorum sint quo atque sunt?</p>

@mixin colors($bg-white: true) {
  @if $bg-white {
    color: red;
  } @else {
    color: yellow;
  }
}

.white {
  @include colors($bg-white: true);
  background-color: white;
}

.blue {
  @include colors($bg-white: false);
  background-color: blue;
}