HTML – 背景图像灰度_html-js-css

概述我在我的网站上的背景我使用颜色,在顶部我有一个图像. 我想用css使这个图像变成黑白图像： body { background: url('background.jpg') center top no-repeat; -webkit-filter: grayscale(100%);} 但是这段代码使整个网站变得灰度我还尝试使用样式-webkit-filter：none将网站内容我在我的网站上的背景我使用颜色,在顶部我有一个图像.
我想用CSS使这个图像变成黑白图像：

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

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

我还尝试使用样式-webkit-filter：none将网站内容放到新的div中;但它也不起作用.

解决方法你可以尝试覆盖在< 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>

总结

以上是内存溢出为你收集整理的HTML – 背景图像灰度全部内容，希望文章能够帮你解决HTML – 背景图像灰度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1052769.html

HTML – 背景图像灰度

发表评论

评论列表（0条）