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

最新推荐文章于 2023-06-11 10:01:41 发布
最新推荐文章于 2023-06-11 10:01:41 发布
阅读量833 收藏 2
点赞数
分类专栏： css样式 文章标签： 全屏变灰色 特殊节日
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012011360/article/details/106790853
版权

效果图：

body上增加class=“filter”后

使用滤镜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>

一天一天积累
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 网页特效 点击按钮全屏变灰
09-12
HTML 网页特效 点击按钮全屏变灰 挡住后面所有的东西
CSS3全屏背景图片缩小渐变代码
04-06
CSS3全屏背景图片缩小渐变代码是一款纯css3实现的背景渐变式切换，不依赖任何JS代码。
CSS 整个网页变灰色调
0_0
04-03 4693
因为新冠肺炎疫情，国务院下达：4月4日举行全国性哀悼活动 为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。 为了表示哀悼，网站将将整个网站变成灰色调。 css实现代码可参考以下： html{ ...
整个网页变黑白的CSS代码
BlueKitty的博客
11-14 9957
1 . 网页黑白代码内部样式 , 写入html标签 &lt;html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);"&gt; 2 . 网页黑白代码内部样式 , 写入head标签里面 &lt;style type="text...
CSS样式库：特殊节日，网站变成灰色
以气御码
06-24 610
抗击疫情仍未结束，将一切打理好，如果仍要小心翼翼的等到明年，我们必须等得起。 1. 实现 原理：CSS的Filter属性，再加上各浏览器的兼容性代码，就完成了。 这里直接贴上代码： body{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale.
css页面全灰解决方案
weixin_39961451的博客
12-02 1022
css页面全灰解决方案
CSS3全屏背景图片缩小渐变特效代码
03-20
【CSS3全屏背景图片缩小渐变特效代码】是一种利用CSS3的新特性来实现的视觉效果，它在网页设计中可以创造出引人入胜的用户体验。这个特效的核心在于，当用户打开网页时，全屏背景图片会以缩小的方式平滑过渡，同时...
css 设置全屏背景图片
09-25
在HTML中，当我们设置背景图，只能采用是否重叠、居中、重叠方向这几个选项
css---将网页全局置灰
总结、沉淀、提升
04-02 3588
亲测有效！！！将网页的全局颜色进行置灰处理...
DIV+CSS中如何让整个页面变成灰色
05-18
当国家发生重大灾害时许多门户网站都把页面变成灰色的，来表示对事件或者遇难同胞的哀伤。那么怎样让网站页面变成灰色的呢？其实方法很简单，在此志豪向大家推荐一下。
css使图片变灰的实现方法
01-19
如果您是想将页面 网页变灰配合全国哀悼日的css代码 20100421 下面是图片特效。 1 一种是图片之间的替换，也就是将正常的图片再做成灰色的。这种方法应该是最稳定的了， 但是就要花费时间去做多余的那些图片了。应该算是比较费事的那种，程序员嘛，都比较懒， 喜欢让计算机干更多的事情。 2 于是又想到了第二种，就是用css来解决问题，上网一搜还真有。 将“filter：gray;”添加到图片的样式中就可以了。 这是应用了滤镜的效果。   对于IE用户这个问题是解决了，但在firefox下就不起作用了。问题在于IE有滤镜的支持，而firefox就没有。 后来只能是在firefox下将图片半透
body全部调成灰色
weixin_30824479的博客
06-08 244
今天打开腾讯网页body的全部(图片和文字)内容都是灰色的 原来今天是“东方之星”沉船遇悲痛事件的第七天，愿逝者安息生者坚强。。 然后我们来看下body全部内容为灰色的效果是怎样实现的 查了下资料原来是filter:grayscale(100%);/*火狐*/ filter：gray;/*ie6-8*/ -webkit-filter：grayscal(100%);/*chrome+*/ ...
2020.4.4 网站 css 全灰
mrhao61 的博客
04-04 125
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:grayscale(100%);-moz-filter:grayscale(100%);-o-filter:grayscale(100%);-webkit-filter:grayscale(1)}
网站全灰，原来仅需一行css代码
c347087870的博客
12-19 1000
打开B站看到网站整体全灰，发现css代码只有一行，十分精简 filter: grayscale(100%); 只需要加在html节点上，就可以
css图片/页面显示灰色
wilL-my的博客
08-26 682
img { -webkit-filter: grayscale(100%); /* Webkit */ filter: gray; /* IE6-9 */ filter: grayscale(100%); /* W3C */ } 页面变灰直接在html节点添加grayscale即可 页面展示其它品牌logo利用先灰度展示，hover时filter:none;展示原本颜色，再给img加一个transition:all .5s;也有不错的显示效果。 f.
【CSS】特殊节日全屏灰色CSS设置
A_lin的杂货铺
06-03 290
<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.
CSS网页变灰色代码方法分享
最新发布
winkexin的博客
06-11 1649
发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。
CSS - 让整个页面变成灰色（一行代码）
热门推荐
王佳斌
05-17 1万+
前言 现在很多大厂产品，遇到清明节、南京大屠杀纪念日等节日，网站或软件就会变为灰色。 在咱们小程序或网站中，实现起来非常简单， 从各种鲜亮的颜色，一行代码变为如下图所示灰色： 解决方案 通过 filter: grayscale(100%) 滤镜属性，了解更多请 点击这里。 以下是使用的示例，您可按照方法应用到您的项目中。 <!DOCTYPE html> <html lang="zh"> <head> <style> /* 整个页面变灰 */ body
CSS3变形技巧：transform属性深度解析
"浅谈CSS3中的变形功能-transform功能" 在CSS3中，变形（transform）功能是一个强大的工具，它允许开发者对元素进行二维或三维空间内的各种变换操作，包括旋转、缩放、倾斜和移动。这个特性极大地提升了网页设计的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值