opera

一、前言 在很多时候我们需要把整个网站变灰，比如“汶川地震”。近日受降雨影响四川茂县突发山体高位垮塌，想起了曾经的汶川地震。来看看网站是如何实现整体变灰的。 二、CSS3 filter(滤镜) 属性 html{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 浏览器支持： grayscale()： 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。 来看一下效果： 可以看到，网页中的图片、css样式、视频都已经变灰。 三、IE浏览器 上面所说的css3属性IE浏览器并不支持，其实这样做已经覆盖了大部分浏览器 filter: gray; 这个属性直接加载html上是不管用的，如果需要图片变灰可以只将样式作用于img标签，或者用*通配符作用于所有元素，这样整个网站就会变灰。 经测试，在IE7-9都是没问题的，IE9以上不能生效。 四、通用方案 如果你执意所有的浏览器都有这个效果，可以通过Greyscale.js实现： 在页面引入js文件： <script src=

ylbtech-CSS：CSS 字体 1. 返回顶部 1、 CSS 字体 CSS字体属性定义字体，加粗，大小，文字样式。 serif和sans-serif字体之间的区别 在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读 CSS字型 在CSS中，有两种类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"） 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"） Generic family 字体系列 说明 Serif Times New Roman Georgia Serif字体中字符在行的末端拥有额外的装饰 Sans-serif Arial Verdana "Sans"是指无 - 这些字体在末端没有额外的装饰 Monospace Courier New Lucida Console 所有的等宽字符具有相同的宽度 字体系列 font-family 属性设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 注意 : 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。 多个字体系列是用一个逗号分隔指明： 实例 p { font-family : "Times

1 简介　　 依靠WebRTC(网络即时通信)的大力协助，寻找合适捕获API的步伐加快了很多。该规范由 W3C WebRTC 工作组 负责监管。Google、Opera、Mozilla 和 其他一些公司 目前正致力于在自己的浏览器中实施该 API。 　　Media.getUserMedia()与WebRTC相关，因为它是通向这组API的门户。它提供了访问用户本地相机/麦克风媒体流的手段。 　　Media.getUserMedia()提示用户允许使用视频或者音频输入设备。例如相机或者屏幕共享和麦克风。如果用户给予许可，就返回一个Promise对象。由于用户没有被强行要求必须做出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve也不会触发reject。 　　【注意】新版本的视频获取接口要用 HTTPS协议 ，否则会抛出如下错误，当然现在在本地访问通过 localhost, 127.0.0.1 或者文件协议，都可以正常使用。 capturing_audio_video.html: 28 getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin,

js如何判断滚轮的上下滚动，我们应该都见到过这种效果，用鼠标滚轮实现某个表单内的数字向上滚动就增加，向下滚动就减少的操作，这种效果是通过 js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动，简要分享。 首先，不得不说一下，因为不同的浏览器有 不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两 个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件，所以在这个过程中需要添加事件监听， 代码如下：兼容firefox采用addEventListener监听。 /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 　　另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail

昨天是 2020 年 4 月 4 日，清明节。 这个清明节，我想我们很多人在今后的很多年中都不会忘记，这一刻，我们参与了历史，同时成为了历史的见证者。 2020 年从过年到现在，我们的国家遭遇了非常惨痛的经历，很多英雄在救助他人的路上倒下，更有很多烈士保卫人民的安危遇难，全国下降半棋，北京时间上午 10 点，全国拉响防空警报，默哀 3 分钟，来致敬逆行的英雄。 同时，所有的公共娱乐活动也全部停止，包括直播、综艺、影视、游戏等等。 在昨天，如果你有打开过抖音 APP ，看到的几乎全都是我们这次的抗疫英雄，我觉得，抖爸爸这次干的漂亮，英雄们值得被这样宣传。 截至4月2日，全国共有60名公安民警和35名辅警牺牲在抗击疫情和维护安全稳定第一线，用宝贵生命谱写了一曲曲人民公安为人民的英雄赞歌。 截止4月3日，已有41位抗疫牺牲殉职医生和护士，2020年我们已经痛失13名院士，沉痛悼念。愿天堂再无病痛！ 我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。 网站变灰 昨天早晨一觉醒来，打开浏览器，整个互联网都变灰了，一开始还以为自己色盲了，后来才反应过来，不禁为自己的智商感到担忧。 不过在网上冲浪一圈，可以看到很多我们常用的网站都变成了灰色的： 可以看到，这些网站的全站内容都变成灰色的了，包括按钮、图片、文字等信息。

原文链接 Document Ready 事件 在jQuery中，document.ready可以让代码在整个文档加载完毕之后执行： $(document).ready(function() { // Code }); JavaScript同样拥有一个DOM内容加载事件的侦听器: document.addEventListener("DOMContentLoaded", function() { // Code }, false); 选择器API jQuery中的选择器语法丰富灵活： var element = $("div"); 现在js中的querySelector完全可以替代它，document.querySelector只获取第一个元素，document.querySelectorAll可以获取全部元素。 var element = document.querySelector("div"); 或者选择所有div的某些内部容器： var elements = document.querySelectorAll(".container div"); 也可以针对特定元素进行查询来找到它的子元素： var navigation = document.querySelector("nav"); var links = navigation.querySelectorAll("a");

什么是CSRF攻击？ 跨站请求伪造(Cross-Site Request Forgery, CSRF)，恶意网站通过脚本向当前用户浏览器打开的其它页面的 URL 发起恶意请求，由于同一浏览器进程下 Cookie 可见性，导致用户身份被盗用，完成恶意网站脚本中指定的操作。 尽管听起来跟XSS跨站脚本攻击有点相似，但事实上CSRF与XSS差别很大，XSS利用的是站点内的信任用户，而CSRF则是通过伪装来自受信任用户的请求来利用受信任的网站。 你可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义向第三方网站发送恶意请求。CRSF能做的事情包括利用你的身份发邮件、发短信、进行交易转账等，甚至盗取你的账号。 CSRF攻击原理 CSRF的攻击原理如下图所示。 首先用户C浏览并登录了受信任站点A； 登录信息验证通过以后，站点A会在返回给浏览器的信息中带上已登录的cookie，cookie信息会在浏览器端保存一定时间（根据服务端设置而定）； 完成这一步以后，用户在没有登出（清除站点A的cookie）站点A的情况下，访问恶意站点B； 这时恶意站点 B的某个页面向站点A发起请求，而这个请求会带上浏览器端所保存的站点A的cookie； 站点A根据请求所带的cookie，判断此请求为用户C所发送的。 因此，站点A会报据用户C的权限来处理恶意站点B所发起的请求，而这个请求可能以用户C的身份发送 邮件

点击上方“ 民工哥技术之路 ”，选择“设为星标” 回复“ 1024 ”获取独家整理的学习资料！ 我们现在每个人都离不开互联网，所以在很多网站上都有很多帐户和密码。如果每个账号都实用同一个密码，是非常不安全的，但如果使用不同的密码，又会记不住，所以今天给大家介绍3款强大的开源 密码管理 器，希望对你们有帮助。 1、1Password 这是很多人都爱用的密码管理器，被推荐过很多次了！1Password能帮助管理和保存我们所有的密码，加密后保存在本地，不同设备间可通过 Dropbox、iCloud 同步数据，在电脑浏览器或手机浏览器上安装插件后可以一键自动填写用户名密码，实现一键登录，非常方便，它支持Windows、 Mac、iOS、Android几乎所有的操作系统。 2、bitwarden bitwarden是开源、免费的，不仅支持全平台同步，还支持二步验证和浏览器自动填写，通过插件和客户端，能方便地一键填入密码。它除了有网页版、iOS、Android 移动版客户端外，还有Chrome、FireFox、Opera、Edge 浏览器插件，基本能在所有电脑手机上同步和使用你的个人密码数据。 3、KeeWeb KeeWeb是开源、跨平台的密码管理工具，具有云同步，键盘快捷键和插件等功能。KeePass 有一个官方客户端，功能简单易用，并且与 KeePass 存储加密密码的文件格式兼容

获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。 下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 getBoundingClientRect。 1.getBoundingClientRect方法简介 getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。 使用方法如下： let domToTop = dom.getBoundingClientRect().top // dom 的顶边到视口顶部的距离 let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离 let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离 let domToRight = dom

css控制元素不可见的方法 { display: none; /* 不占据空间，无法点击 */ } /********************************************************************************/ { visibility: hidden; /* 占据空间，无法点击 */ } /********************************************************************************/ { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } /********************************************************************************/ { position: relative; top: -999em; /* 占据空间，无法点击 */ } /********************************************************************************/ { position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } /*********