Question

我正在尝试根据背景颜色更改文字颜色。假设我的背景有黑色条纹，整体背景为白色，我需要白色背景上的文字黑色和黑色背景上的白色文字。

有没有办法做到这一点，只有CSS？如果不是，那么执行此操作的最佳做法是什么。请参阅下面的HTML：

NSArray *subviews = [[[UIDevice currentDevice] systemVersion] floatValue] < 7 ? _searchBar.subviews : _searchBar.subviews[0].subviews;

for (UIView *subview in subviews)
{
    if ([subview conformsToProtocol:@protocol(UITextInputTraits)])
    {
        UITextField *textField = (UITextField *)subview;
        [textField setKeyboardAppearance: UIKeyboardAppearanceAlert];
        textField.returnKeyType = UIReturnKeyDone;
        break;
    }
}

CSS

<div class="background">
  <p>Aliquam dolor nunc, auctor non dolor vitae, eleifend fringilla felis. Praesent dapibus erat ut nisl commodo ullamcorper.</p>
  <p>Morbi eget urna augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Nullam laoreet auctor urna at eleifend. Proin venenatis hendrerit mauris, mollis malesuada lorem consectetur et. Aliquam sed iaculis augue.</p>
  <p>Donec viverra ex in lectus luctus porttitor.</p>
</div>

这是一个Codepen，以便更好地理解。感谢。

Answer 1

您可以使用mix-blend-mode属性实现此效果。我必须警告你，IE中不存在支持。要执行您想要执行的操作，您需要让所有元素重叠，就像您已经拥有的那样，然后将<span>或您用于文本的任何元素设置为mix-blend-mode: difference;。

如果您想使用实际颜色而不仅仅是黑色和白色，则需要使用具有该颜色的其他元素。它需要覆盖您想要应用颜色的整个区域，并将mix-blend-mode设置为screen。

虽然这是捕捉，但元素不应该在彼此之内。文本需要高于背景元素，但不能隐藏它们。我建议使用包装器<div>来解决这个问题。

Answer 2

你可以这样说：

背景：background-color: black;或background-color: white;
文字为：color: black;或color:white;。

基于背景的反向文本颜色

2 个答案: