Question

我在网站上的背景我使用颜色，在顶部我有一个图像。我想用css将这张图片变成黑白：

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

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

我还尝试将网站内容放到风格为-webkit-filter: none;的新div中，但它既不起作用。

Answer 1

还有另一种不使用d2使用覆盖div的解决方案。

所有主流浏览器https://caniuse.com/?search=background-blend-mode（IE除外）都支持此功能

background-blend-mode

Answer 2

你可以试试覆盖<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;
}

你的html看起来像

<body>
    <div id="overlay"></div>
    <!-- other body elements -->
</body>

Answer 3

这是jsx语法中的块样式（来自reactjs-application）。我不知道那里发生了什么，但似乎可行

            style={{
                minHeight: '100vh',
                backgroundPosition: 'center',
                backgroundSize: 'cover',
                backgroundImage:"linear-gradient(black, black), url('images/bgimage.jpg')",
                backgroundBlendMode: 'saturation'
            }}

背景图像灰度

3 个答案: