gpt4 book ai didi

html - 反转图像标题的颜色

转载 作者:行者123 更新时间:2023-11-28 19:16:04 27 4
gpt4 key购买 nike

这是我当前的 HTML:

.titleText {
font-family: Hacked;
font-size: 8rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
}

.titleContainer {
position: relative;
}

body {
margin: 0;
}
<!DOCTYPE html>
<div class="titleContainer">
<img src="assets/ethan.png">
<h1 class="titleText">Ethan Brand</h1>
</div>

我希望图像上的文本是“透明的反面”,反转文本每个像素后面的颜色。我发现了这个:How can I invert color using CSS?但这会改变所有文本,而不是每个像素的倒数。

谢谢!

最佳答案

使用mix-blend-mode: difference;在文本上使用 color: white:

.titleText {
font-family: Hacked;
font-size: 8rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
mix-blend-mode: difference;
color: white;
margin: 0;
}

.titleContainer {
position: relative;
}

body {
margin: 0;
}
<div class="titleContainer">
<img src="https://picsum.photos/800/400">
<h1 class="titleText">Ethan Brand</h1>
</div>

关于html - 反转图像标题的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58308700/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com