白色文本颜色和白色图像背景颜色问题

Question

我有如下图像和文字。

.html

<div [ngClass]="cssDivClass" (click)="goToNextPage(data)">
  <img [src]="data?.image" class="image" tappable>
  <div class="caption" [ngClass]="ionTextUppercase">{{data?.name }}</div>
</div>

.scss

.caption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
}

我的问题是我该如何处理带有白色背景图像的文本颜色（即白色）？我应该在这里使用哪种CSS技巧？我在这里需要白色文本，因为其他大多数图像都具有深色。那么我该如何以一种通用的方式来处理呢？

Answer 1

也许在阴影背景下，文本阴影也可以帮助您获得良好的对比度。

如果背景较浅，您还可以考虑使用醒目的颜色提取插件来设置替代文本颜色： https://ourcodeworld.com/articles/read/403/top-5-best-image-color-extraction-javascript-and-jquery-plugins

您也可以考虑使用：

mix-blend-mode: difference;

，仅对不支持此属性的浏览器使用文本阴影

https://caniuse.com/#search=mix-blend-mode

body{
  background:#fff;
  font-size:30px;
}
.container{
  transform: translateZ(0);
  will-change: opacity;
    background: url("https://placeimg.com/640/480/any/grayscale")
    no-repeat left / cover;
}

.shadow {
    color:#fff;
    text-shadow:1px 1px 2px #000;
}

.blend {
  mix-blend-mode: difference;
  color:#fff;
}

<div class="container">
<div class="shadow">text-shadow</div>

<div class="blend">difference</div>
</div>

Answer 2

您可以在白色文字上尝试阴影，这样它将在黑暗和明亮的照片上显示。

text-shadow: #fc0 1px 0 10px;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

另一种技巧是在文本下方使用半透明的div，这样无论背景是什么，文本都将可见。看起来像这样：

https://divibooster-6d4b.kxcdn.com/wp-content/uploads/2014/10/divi-theme-semi-transparent-background.png

还有另一种可能性是使用Javascript。如果您的照片是“浅色”照片，请将文本的CSS类更改为“颜色：黑色”。如果它是“深色”照片，请将文本的CSS类别更改为“颜色：白色”。