css全屏变灰色（特殊节日使用）

谁借莪１个温暖的怀抱￠ 2023-02-18 08:16 1阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

body上增加class=“filter”后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 1][]

**使用滤镜filter的grayscale函数。**

<style>  
.filter \{  
  -webkit-filter: grayscale(100%); /\* webkit \*/  
  -moz-filter: grayscale(100%); /\*firefox\*/  
  -ms-filter: grayscale(100%); /\*ie9\*/  
  -o-filter: grayscale(100%); /\*opera\*/  
  filter: grayscale(100%);  
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /\*ie\*/  
  filter: gray; /\*ie9- \*/  
\}  
</style>  
<html class="filter">  
  <img src="https://cdn.pixabay.com/photo/2015/04/20/17/01/flower-731830\_960\_720.jpg" />  
</html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616170908549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200616170947635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 实现全屏滚动效果的CSS和JavaScript示例 ⭐ HTML 结构 ⭐ CSS 样式 (style

今天药忘吃喽~/ 2023年10月15日 07:47/ 0 赞/ 132 阅读

相关全网黑白、灰色网页变回正常彩色方法

大伙都知道。每当一到一些特定的日子，全网上下包括APP，一片死灰。所有的网页几乎都没有了任何色彩，让大家心情极度压抑。我反正有这种感觉。感觉无法呼吸一样。。浏览起来心情特别沮丧

怼烎@/ 2023年10月04日 20:14/ 0 赞/ 43 阅读

相关 css3滤镜使网站变灰色调

其实就是滤镜的效果 html{ filter: grayscale(100%); -webkit-filter: grayscal

小咪咪/ 2023年07月22日 05:56/ 0 赞/ 12 阅读

相关 css全屏变灰色（特殊节日使用）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

谁借莪１个温暖的怀抱￠/ 2023年02月18日 08:16/ 0 赞/ 2 阅读

相关 css设置全屏轮播

配置全屏图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

快来打我*/ 2023年01月12日 11:50/ 0 赞/ 161 阅读

相关 api窗口全屏_使用全屏API

api窗口全屏 In this article, we’ll cover the [Fullscreen API][] with ample amounts of code

缺乏、安全感/ 2022年11月27日 04:27/ 0 赞/ 195 阅读

相关 js - 全屏/取消全屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

深碍√TFBOYSˉ_/ 2022年11月25日 05:23/ 0 赞/ 245 阅读

相关 CSS背景铺满全屏

html { background: url(images/bg.png) no-repeat center center fixed; -webkit-backgro

Love The Way You Lie/ 2022年08月18日 11:41/ 0 赞/ 191 阅读

相关 CSS之网页变灰色

<style> html { -webkit-filter: grayscale(100%); -moz-filter: gra

雨点打透心脏的1/2处/ 2022年07月12日 01:16/ 0 赞/ 227 阅读

相关全屏

JavaScript控制浏览器全屏 css代码 <style> html,body { padding: 0; margin: 0; height: 100%;

旧城等待，/ 2022年05月31日 12:05/ 0 赞/ 245 阅读