HTML – 背景图像灰度

HTML – 背景图像灰度,第1张

概述我在我的网站上的背景我使用颜色,在顶部我有一个图像. 我想用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 – 背景图像灰度所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存