Html 背景图像灰度_Html_Css - Fatal编程技术网

Html 背景图像灰度

html css

Html 背景图像灰度,html,css,Html,Css,我在我的网站上使用颜色作为背景，顶部有一个图像。我想用css将此图像变成黑白： body { background: url('background.jpg') center top no-repeat; -webkit-filter: grayscale(100%); } 但是这个代码使整个站点变成灰色我还尝试使用样式-webkit-filter:none将网站内容放到新的div中但它也不起作用。您可以尝试覆盖在像这样 #overlay { background

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

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

但是这个代码使整个站点变成灰色

我还尝试使用样式

-webkit-filter:none将网站内容放到新的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>

这是jsx语法中的块样式（来自reactjs应用程序）。我不知道那里发生了什么，但似乎起了作用

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

还有一种解决方案不使用叠加div，它使用

背景混合模式

这在所有主要浏览器（IE除外）中都受支持

从你们的代码中我可以理解，你们使用的是全身选择器。现在你正在为身体选择一个背景——哪一个是你的真实可见的网站？你到底在期待什么呢？你在上面有一个应该是灰度或背景的图像？他从来没有说过他在使用reactjs或任何他不需要的js框架。这只是jsx语法代码，如果他愿意，他可以使用标准js或css语法。

background-color: rgba(255,255,255,1);
background: url('background.jpg') center top no-repeat;
background-blend-mode: luminosity;