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

谁借莪１个温暖的怀抱￠ 2023-02-18 08:16 22阅读 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 条评论，22人围观）

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

相关阅读

相关 CSS网页变灰色代码方法分享

发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。 ![2a739316b49c466eb91216e6b81

淩亂°似流年/ 2024年03月16日 16:34/ 0 赞/ 29 阅读

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

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

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

相关 CSS网页变灰色实例汇总

文章目录 CSS网页变灰色实例汇总 1.搜狐 2.B站 3.搜狗 4.天

àì夳堔傛蜴生んèń/ 2023年07月22日 09:05/ 0 赞/ 19 阅读

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

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

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

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

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

相关 css设置全屏轮播

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

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

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

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

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

相关 js - 全屏/取消全屏

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

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

相关 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 赞/ 210 阅读

相关 CSS之网页变灰色

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

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