我在我的网站上使用颜色作为背景,在顶部我有一个图像。我想用 css 把这张图片变成黑白的:
body {
background: url('background.jpg') center top no-repeat;
-webkit-filter: grayscale(100%);
}
Run Code Online (Sandbox Code Playgroud)
但是这段代码使整个网站灰度化
我还尝试将网站内容放入带有样式的新 div 中,-webkit-filter: none;但它也不起作用。
<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)
| 归档时间: |
|
| 查看次数: |
2832 次 |
| 最近记录: |