我想这样做/image/Kqldb.jpg 如果文本没有黄色背景/img 背景，我想将文本从白色更改为黑色。 我尝试使用 mix-blend-mode 和 filter:invert() 但它对我不起作用。
感谢您的帮助!
这是我当前的 html/css。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
h1 {
font-size: 5rem;
}
p {
font-size: 2.25rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia saepe reprehenderit nihil quam facere odio
eveniet modi in earum impedit non id, est vero. Non
culpa reprehenderit magni?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt
animi architecto! Consequatur maxime dolorum eius placeat
animi.
</p>
<img src="https://svgshare.com/i/R7P.svg" alt="">
</body>
</html>最佳答案
mix-blend-mode可能会有所帮助。
h1,
p {
mix-blend-mode: color;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
h1 {
font-size: 5rem;
}
p {
font-size: 2.25rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe reprehenderit nihil quam facere odio eveniet modi in earum impedit non id, est vero. Non culpa reprehenderit magni?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt animi architecto! Consequatur maxime dolorum eius placeat animi.
</p>
<img src="https://svgshare.com/i/R7P.svg" alt="">
</body>
</html>将图像与文本混合并增加对比度也可能有所帮助，但也会修改颜色。:
img {
filter:contrast(200%);
mix-blend-mode: luminosity;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
position: absolute;
top: 0;
left: 0;
}
h1 {
font-size: 5rem;
}
p {
font-size: 2.25rem;
}<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe reprehenderit nihil quam facere odio eveniet modi in earum impedit non id, est vero. Non culpa reprehenderit magni?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt animi architecto! Consequatur maxime dolorum eius placeat animi.
</p>
<img src="https://svgshare.com/i/R7P.svg" alt="">background-clip 也可以是另一种方法，使用两倍的 svg 形状(白色的作为背景，黄色的显示。
div {
position: relative;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzM3IiBoZWlnaHQ9IjY5NCIgdmlld0JveD0iMCAwIDczNyA2OTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNTU3LjUgMjI0LjVDNTg0IDQzMSAyMzYuNjAzIDcwOC43OCAtNzEgNjkzTC04Ny41IC0xOTguNUw3MzYuNSAtMjM5QzU4OS42MTcgLTE0LjQ3MjQgNTMxIDE4IDU1Ny41IDIyNC41WiIgZmlsbD0iI0ZGRiIvPg0KPC9zdmc+) 0 0 no-repeat black;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
h1 {
font-size: 5rem;
}
p {
font-size: 2.25rem;
}
div svg {
position: absolute;
top: 0;
left: 0;
z-index: -1
}<div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe reprehenderit nihil quam facere odio eveniet modi in earum impedit non id, est vero. Non culpa reprehenderit magni?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt animi architecto! Consequatur maxime dolorum eius placeat animi.
</p>
<svg width="737" height="694" viewBox="0 0 737 694" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M557.5 224.5C584 431 236.603 708.78 -71 693L-87.5 -198.5L736.5 -239C589.617 -14.4724 531 18 557.5 224.5Z" fill="#F5DC00"/>
</svg>
</div>关于html - 我可以更改不同背景中文本部分的颜色吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64625983/