前端 - CSS让网页变为黑白配色
这一行代码是个CSS代码:
filter: grayscale(1)
为了使整个网页生效,你可以把它放在body里。直接写到html文件内,例如:
<style> body { filter: grayscale(1); } </style>
你也可以用内联样式,优先级最高:
<body style="filter:grayscale(1)"></body>
为了更好的兼容性,你可以加一下前缀:
<body style="filter:grayscale(1);-webkit-filter:grayscale(1)"></body>
原理
我们使用了 CSS 特性 filter,并用了 grayscale 对图片进行灰度转换,允许有一个参数,可以是数字(0到1)或百分比,0% 到 100% 之间的值会使灰度线性变化。
如果你不想完全灰掉。可以设置个相对小的数字。
博客园首页是设置了 1,掘金首页是设置了 0.95,也挺大的,看不出彩色。
兼容性
我们使用了 CSS 特性 filter,兼容性还是不错的
如果你想获得更好的兼容性,可以加一个前缀 -webkit-
:
filter: grayscale(.95); -webkit-filter: grayscale(.95);
把样式加到了 html 元素上,当然把样式加到 body 元素上效果是一样的。
filter 有11个参数:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
blur (px) 高斯模糊,单位是像素。如:blur(5px)
drop-shadow (h-shadow v-shadow blur spread color) 阴影,如:drop-shadow(8px 8px 10px red);
hue-rotate (deg) 色相,值表示角度(0-360)
以下数值均为百分比(%)
以下三个以100%为基准,即无变化,往上为增 ,往下为减。
brightness 明度
contrast 对比度
saturate 饱和度
以下四个范围为(0~100%)
grayscale 灰度
invert 颜色反转,类似底片效果
opacity 透明度
sepia 棕褐色,类似老照片效果
url
相关文章
- TinyFileManager 一款强大的单文件目录程序支持上传预览编辑压缩等功能 ftp网页版工具
- 如何利用WebSocket实现网页版聊天室
- IE-“无法浏览网页” 教你十招解决疑难杂症
- 大型情感剧集Selenium:8_selenium网页截图的四种方法
- 网页制作,网站制作中put和get的区别
- 网页适配 iPhoneX,就是这么简单
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
- 解除网页限制(禁止复制)
- 网页设计DIV+CSS——第3 天:定义语言编码
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案安装使用常见问题的分析
- EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息
- EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap-datepicker日历插件的实时动态展现
- EasyNVR摄像机网页无插件直播方案H5前端构建之:区分页面是自跳转页面还是分享页面
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端
- rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试:ie下的 pointer-events- none
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
- Python:使用readability-lxml 提取网页标题和主体内容
- asp.net打印网页后自动关闭网页【无需插件】
- 网页爬虫框架jsoup介绍
- 谷歌浏览器 打开网页出现 out of memory
- url下载网页的三种方法
- 案例:网页自动化截图接口推送到手机(截图维格表数据)