英文:
How can I get a text colour to black/white when background changes for max contrast?
问题
所以我正在尝试实现与此网站上的电子邮件元素类似的效果：https://madebyshape.co.uk/
.custom-blend-mode {
mix-blend-mode: difference;
}
所以我已经成功让它工作了，但它会改变成相反的颜色，然而我希望它只是黑色或白色，以获得最大对比度。
英文:
So I'm trying to achieve a similiar effect to the e-mail element on this website:https://madebyshape.co.uk/
.custom-blend-mode {
mix-blend-mode: difference;
}
So I got this to work but it changes to the opposite colour, however I would like it to be only black or white for max contrast.
答案1
得分: 1
我认为实现你所要求的可能性不大。在你提供的网站上，文本没有灰度处理。如果你将网站的某个部分背景设置为蓝色并滚动到那里，电子邮件文本会变成黄色。
编辑:
使用以下方法，文本无法自行确定其背景。它只能动态反转父元素的背景。因此，你不能使用这种方法来获得与你提供的页面上完全相同的结果。为此感到抱歉。
这种方法侧重于更改背景或在具有不同颜色背景图像的前面拥有高对比度的文本。
你可以尝试这个：
<!-- 开始代码片段：js 隐藏: false 控制台: true Babel: false -->
<!-- 语言：lang-css -->
div {
background-color: #af0;
}
p {
background-color: inherit;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
filter: invert(1) grayscale(1) contrast(9);
}
<!-- 语言：lang-html -->
<div>
<p>Testing</p>
</div>
<!-- 结束代码片段 -->
你可以在以下网站上找到更多信息：
https://css-tricks.com/methods-contrasting-text-backgrounds/
英文:
I don't think its possible to achieve what you are requesting. On the website you linked, the text is not grayscaled. If you set the background of a part of the website to blue and scroll there, the e-mail text gets yellow.
EDIT:
With the following approach the text is unable to determine its background on its own. It can only invert the background of the parent element dynamically. So you can't use this approach to get the exact result like on the page you linked. Sorry for that.
This approach is focused on changing backgrounds or having high contrast text in front of a background image with different colors.
You can try this one out:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
background-color: #af0;
}
p {
background-color: inherit;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
filter: invert(1) grayscale(1) contrast(9);
}
<!-- language: lang-html -->
<div>
<p>Testing</p>
</div>
<!-- end snippet -->
You might find more information about it on the following website:
https://css-tricks.com/methods-contrasting-text-backgrounds/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论