修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色、黑色色调,这个记得在以前纪念一些日子的时候会有用到,早年老蒋在自己的博客中也有使用的。记得那时候直接是修改CSS就可以实现,既然有用户需要,老蒋这里抽点时间再整理一下看看是否有其他更好的方法。
我们可以根据实际的需要选择合适的CSS代码样式添加到自己的网页模板的代码中实现网页灰色、黑白样式。
第一、网页黑白代码样式A
<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>
这里我们可以将代码添加到HEAD模板中,要实现全站才可以。
第二、网页黑白代码样式B
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
同样的可以添加到样式中。
第三、网页黑白代码样式C
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);">
这个直接是修改HEAD区域顶部HTML的,这个好像比较简单。
这里,我们根据实际的需要选择添加到代码中。
原文链接:https://www.itbulu.com/css-grayscale.html
(资源库 www.zyku.net)
上一篇:CSS代码实现三角形和饼图实例
栏 目:CSS
下一篇:CSS去除重叠边框
本文标题:修改CSS样式实现网页变灰色/黑白代码的几个方法整理
本文地址:https://www.zyku.net/css/1914.html
您可能感兴趣的文章
- 08-04CSS代码实现三角形和饼图实例
- 06-15HTML/CSS:div居中和div内部元素垂直居中
- 06-10css中margin-top或者margin-bottom失效的解决方法
- 03-17javascript 动态生成css代码的两种方法
- 03-15Sublime Text 3的Less2Css插件介绍与安装
- 03-11Yii2 加载css、js 载入静态资源
- 03-10利用SublimeLinter 编写高质量的 JavaScript & CSS 代
- 02-27css控制文字过长裁剪后面跟着省略号
- 02-20写给喜欢用DW编写CSS人的一些建议
- 02-20Dreamweaver生成新页面css的类失效
- 01-03番茄心康-番茄心康应用软件功能介绍
- 07-05Linux unarj命令
- 09-14OPPOReno7Pro+怎么设置来电闪光灯
- 09-20opporeno6息屏下启动相机怎样设置
- 01-12江西广电网络-江西广电网络应用软件功
- 01-13天正CAD-天正CAD应用软件功能介绍
- 01-11北斗卫星3D全球街景-北斗卫星3D全球街
- 03-24华为手机镜像投屏方法
- 06-28YII2自动登录Cookie总是失效的解决方
- 03-24oppoa93解决返回震动问题教程
最近更新
阅读排行
猜你喜欢
- 10-15华为nova9pro怎么还原出厂模式
- 07-05Linux bind命令
- 01-12星速WiFi-星速WiFi应用软件功能介绍
- 10-15哔哩哔哩评论时添加笔记教程分享
- 01-11快鲸铃声-快鲸铃声应用软件功能介绍
- 12-25袋鼠英语-袋鼠英语应用软件功能介绍
- 10-18bose耳机如何连接多个设备
- 01-11月光阅读-月光阅读应用软件功能介绍
- 02-23织梦推荐属性默认加粗的修改方法
- 03-15微信小程序中的onLoad详解及简单实例