我的目标是让背景图片像这样横跨整个屏幕: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/