通过css实现页面黑白效果

前言：

临近下班，接到上级通知，为了缅怀今日逝世的英雄；需要对网站进行微调整—— 整个页面呈现出黑白效果

实现：

css的filter（滤镜）属性

filter可以设置的属性值有：

- none:默认值、没有效果

- blur(px):为元素设置模糊度，设置的值越高越模糊（不接受百分比值）

- brightness(%):设置亮暗度，0%图案全黑、100%图像无变化、>100%图像更亮

- contrast(%):设置元素的灰白度，0%元素全灰、100%元素无变化、>100%元素更白

-drop-shadow(h-shadow v-shadow blur spread color):设置阴影效果,类似box-shadow

-grayscale(%):将元素转换为灰白度图像。取值范围（0%-100%或0-1）

-hue-rotate(deg)：

-invert(%)：反转输入图像

-opacity(%):转化元素的透明度，相当于opacity属性

-saturate(%):转换元素饱和度

-sepia(%):将图片转化为深褐色

-url()：URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

可以同时使用多个滤镜，每个滤镜用空格隔开

例：

img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}

通过js修改属性时：document.body.style.WebkitFilter="grayscale(100%)"

通过css实现页面黑白效果相关推荐

css滤镜做页面黑白效果
滤镜-做整个页面黑白 /* filter: grayscale(100) */ background-color: rgba(0, 0, 0, 0.3); /* 高斯模糊 */ fil ...
css后台页面布局效果
CSS浮动+定位参考:实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:https://www.cnblogs.com/yzhihao/p/6513022.html 下面使用的关键就 ...
使用CSS对页面加载的淡入效果
本文翻译自:Using CSS for fade-in effect on page load Can CSS Transitions be used to allow a text paragrap ...
css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...
css使图片变成黑白效果 - 代码篇
css使图片变成黑白效果 - 代码篇代码如下: -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: ...
html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面轮播图效果 < > css页面 carousel.css #main{ width: 655px; height: 361px; position: relative; } ...
全局样式实现页面黑白色调——filter的使用——css基础
如何用代码实现网页变黑白色调.使用css实现网页黑白色调的功能. 1.打开网页的控制台 2.找到body标签,然后在控制台添加以下代码代码如下: body{-webkit-filter: gray ...
【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
html鼠标元素效果,如何使用CSS实现鼠标移动控制页面元素效果？（代码示例）...
本篇文章给大家介绍一下使用css映射的鼠标位置,实现通过鼠标移动控制页面元素效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 映射鼠标位置或实现拖拽效果,我们可以在 Jav ...

通过css实现页面黑白效果

通过css实现页面黑白效果相关推荐

最新文章

热门文章