gpt4 book ai didi

html - 灰度背景改变文字颜色? CSS

转载 作者:行者123 更新时间:2023-11-28 16:50:38 25 4
gpt4 key购买 nike

我的目标是让背景图片像这样横跨整个屏幕:http://playjudgey.com/

我试图将我的背景图像更改为灰度,但每次我这样做时,它都会更改写在图像上的所有文本。我假设过滤器适用于我的 div 内的所有内容。我的代码如下:

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width">
</head>

<body>
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
</body>

这就是我为我的 CSS 所做的:

.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;

}

.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('../img/money.jpg');
-webkit-filter: grayscale(1);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}

问题是我写的文字不是红色的,而是灰色的。有什么方法可以对此进行不同的编码,以便我的文本显示为彩色?还是应该通过外部程序将图像灰度化?

最佳答案

您可以使用仅适用于背景的混合模式获得相同的效果,此外,它有更多支持(FF)

.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
font-size: 60px;

}

.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('http://placekitten.com/1000/750');
background-color: gray;
background-blend-mode: luminosity;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
    <div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>

关于html - 灰度背景改变文字颜色? CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32703414/

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