背景图像灰度

Ada*_*amo 6 html css

我在我的网站上使用颜色作为背景,在顶部我有一个图像。我想用 css 把这张图片变成黑白的:

body {
    background: url('background.jpg') center top no-repeat;
    -webkit-filter: grayscale(100%);
}
Run Code Online (Sandbox Code Playgroud)

但是这段代码使整个网站灰度化

我还尝试将网站内容放入带有样式的新 div 中,-webkit-filter: none;但它也不起作用。

Cyb*_*ova 1

<body> 你可以尝试像这样覆盖不同的div

#overlay {
    background: url('background.jpg') center top no-repeat;
    -webkit-filter: grayscale(100%);
    z-index: -1;
    opacity: 0.5; /*make it as your requirement*/
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
Run Code Online (Sandbox Code Playgroud)

你的 html 看起来像

<body>
    <div id="overlay"></div>
    <!-- other body elements -->
</body>
Run Code Online (Sandbox Code Playgroud)