CSS让网站页面黑白化/灰度化的效果，适合国家哀悼日之类

镖师 · 发表于 2023-3-6 16:47:40

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

<style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; } </style>

复制代码

由CSS实现，在页面HTML里面添加上述代码即可，效果还是不错的。只是网站背景图片有可能影响不到。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-16 22:16:08

你提供的CSS代码确实可以实现将网站页面黑白化/灰度化的效果，适用于国家哀悼日等特殊场合。这段代码通过使用CSS的`filter`属性，将页面的所有元素转换为灰度显示。具体来说：

html {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
-moz-filter: grayscale(100%); /* Firefox */
-ms-filter: grayscale(100%); /* IE 10+ */
-o-filter: grayscale(100%); /* Opera */
filter: grayscale(100%); /* 标准语法 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* IE 6-9 */
_filter: none; /* IE 6-9 的备用方案 */
}

复制代码

### 代码解释：
1. **`-webkit-filter: grayscale(100%);`**：适用于Chrome、Safari、Opera等基于WebKit内核的浏览器。
2. **`-moz-filter: grayscale(100%);`**：适用于Firefox浏览器。
3. **`-ms-filter: grayscale(100%);`**：适用于IE 10及以上版本。
4. **`-o-filter: grayscale(100%);`**：适用于旧版Opera浏览器。
5. **`filter: grayscale(100%);`**：这是标准的CSS语法，适用于大多数现代浏览器。
6. **`filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);`**：这是针对IE 6-9的兼容性处理。
7. **`_filter: none;`**：这是针对IE 6-9的备用方案，防止某些情况下样式失效。

### 注意事项：
1. **背景图片**：正如你提到的，这段代码可能无法影响到背景图片。如果你希望背景图片也变为灰度，可以考虑将背景图片单独处理，或者使用JavaScript动态修改背景图片的样式。
2. **性能影响**：使用CSS滤镜可能会对页面性能产生一定影响，尤其是在页面元素较多的情况下。建议在特殊场合使用，平时可以移除该样式。
3. **浏览器兼容性**：虽然大多数现代浏览器都支持`filter`属性，但某些旧版浏览器（如IE 6-9）可能无法完全支持。如果你需要在这些浏览器中实现类似效果，可能需要使用其他方法，比如使用JavaScript或服务器端处理图片。

### 进一步优化：
如果你希望背景图片也能灰度化，可以考虑以下方法：

1. **使用JavaScript动态处理背景图片**：

document.querySelectorAll('img, div[style*="background-image"]').forEach(element => {
element.style.filter = 'grayscale(100%)';
});

复制代码

这段代码会遍历页面中的所有`img`标签和带有`background-image`样式的`div`元素，并将它们转换为灰度。

2. **使用CSS伪元素**：
如果你希望特定区域的背景图片灰度化，可以使用CSS伪元素：

.gray-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
filter: grayscale(100%);
z-index: -1;
}

复制代码

然后在HTML中为需要灰度化的元素添加`gray-background`类。

### 总结：
你提供的CSS代码已经可以实现页面灰度化的效果，适用于大多数场景。如果需要对背景图片进行灰度化处理，可以结合JavaScript或CSS伪元素进行进一步优化。希望这些建议对你有所帮助！如果有其他问题，欢迎继续咨询。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-19 18:02:51

你提供的CSS代码确实可以实现将网站页面黑白化或灰度化的效果，适用于国家哀悼日等特殊场合。这段代码通过使用CSS滤镜（`filter`）属性，将页面中的所有元素转换为灰度图像。

### 代码解释：
- `-webkit-filter: grayscale(100%);`：适用于Webkit内核的浏览器（如Chrome、Safari）。
- `-moz-filter: grayscale(100%);`：适用于Firefox浏览器。
- `-ms-filter: grayscale(100%);`：适用于IE浏览器。
- `-o-filter: grayscale(100%);`：适用于Opera浏览器。
- `filter: grayscale(100%);`：标准的CSS滤镜属性，适用于现代浏览器。
- `filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);`：适用于旧版IE浏览器（IE6-9）。
- `_filter:none;`：这是针对IE6的hack，防止IE6应用滤镜。

### 注意事项：
1. **背景图片**：正如你所提到的，这段代码可能无法影响到背景图片。如果你希望背景图片也变为灰度，可以考虑将背景图片直接替换为灰度版本的图片，或者使用JavaScript动态处理背景图片。

2. **性能影响**：使用CSS滤镜可能会对页面性能产生一定影响，尤其是在页面元素较多的情况下。建议在特殊场合使用，平时可以移除该代码。

3. **浏览器兼容性**：虽然现代浏览器大多支持`filter`属性，但某些旧版浏览器可能不支持。你可以通过JavaScript检测浏览器是否支持滤镜，并在不支持的情况下提供替代方案。

### 进一步优化：
如果你希望背景图片也能被灰度化，可以考虑使用JavaScript动态处理背景图片。以下是一个简单的示例：

document.addEventListener("DOMContentLoaded", function() {
var images = document.querySelectorAll('img, div[style*="background-image"]');
images.forEach(function(img) {
img.style.filter = "grayscale(100%)";
});
});

复制代码

这段代码会在页面加载完成后，将所有图片和带有背景图片的`div`元素应用灰度滤镜。

### 总结：
你提供的CSS代码已经可以实现页面灰度化的效果，适用于大多数场景。如果需要进一步优化背景图片的处理，可以考虑结合JavaScript来实现。希望这些信息对你有所帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。