技术标签： 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100%;
height:100px;
margin:10px;
text-align:center
}
.div1 img{
-webkit-filter:blur(1px);
filter:blur(1px);
}
/*blur() 高斯模糊.接受一个css长度值作为参数,可以是 px/vw/vh/rem 等单位,唯独不能是%.值越大越模糊*/
.div2 img{
-webkit-filter:brightness(4.8);
filter:brightness(4.8);
}
/*brightness() 亮度.使图片更亮或者更暗.参数为百分比,默认为1.当参数为0时,图片全黑;参数可以大于100%,也可以是小数点形式*/
.div3 img{
-webkit-filter: contrast(0.5);
filter:contrast(0.5);
}
/*contrast() 对比度. 对比度是指一幅图片中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,差异范围越大代表对比越大,差异越小代表对比越小*/
.div4 img{
-webkit-filter: saturate(300%);
filter:saturate(300%);
}
/*saturate() 饱和度. 是图片变暗下来或者更鲜明.参数为百分比,默认为1,或者大于100%*/
.div5 img{
-webkit-filter: opacity(0.8);
filter:opacity(0.8);
}
/*opacity() 透明度. 跟css3中的opacity属性效果是一致的,而使用filter,一些浏览器为了提升性能会提供硬件加速*/
.div6 img{
-webkit-filter: grayscale(1);
filter:grayscale(1);
}
/*grayscale() 灰度级. 将图像转换为灰度图像.参数为百分比,默认为0.若设置100%,则完全转化为灰度图像*/
.div7 img{
-webkit-filter: hue-rotate(180deg);
filter:hue-rotate(180deg);
}
/*hue-rotate() 色相旋转. 色相是色彩的首要特征.是区别各种不同色彩的最准确的标准.事实上任何黑白灰以外的颜色都有色相的属性,
而色相也是由原色、间色和复杂色来构成的。hue-rotate()函数通过旋转角度对色相进行旋转从而改变图像在视觉上的效果.参数为度数deg
*/
.div8 img{
-wekbit-filter:invert(1);
filter:invert(1);
}
/*invert() 反色. 反色又叫补色,红的补色是绿色,蓝的补色是橙色,黄的补色是紫色,由着三种对比关系可引出很多对比的反色.在画图程序中,
反色操作是指把画面中的黑色变为白色,白色变为黑色,绿色变为红色,黄色变为紫色.参数为百分比,不能超过100%.
*/
.div9 img{
-webkit-filter: sepia(0.5);
filter:sepia(0.5);
}
/*sepia() 将图像转化为深褐色,发黄发旧的效果,参数为百分比,默认为0,不超过100%*/
.box1 img{
-webkit-filter: grayscale(1);
filter:grayscale(1);
cursor:pointer;
}
.box1 img:hover{
-webkit-filter:grayscale(0);
filter:grayscale(0);
}
.box1{
width:100%;
height:auto;
margin:10px;
text-align:center;
}
.blur-box{
position:relative;
width:200px;
height:150px;
background:url("../images/bg0.jpg");
padding-top:50px;
background-size:100% 100%;
z-index:-1;
margin:0 auto;
}
.blur-img{
position: relative;
width:150px;
height:80px;
line-height:80px;
padding:10px;
margin:auto;
color:#fff;
overflow: hidden;
}
.blur-img:before{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:url("../images/bg0.jpg") no-repeat;
background-position: -50px -50px;
background-size:300px 200px;
-webkit-filter: blur(5px);
filter:blur(5px);
z-index:-1
}
</style>
</head>
<body>
<div class="div1"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div2"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div3"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div4"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div5"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div6"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div7"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div8"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div9"><img src="../images/bg0.jpg" width="100" height="100"></div>
<hr/>
<center>常见案例</center>
<div class="box1">
<h5>鼠标上移效果,默认为灰色,鼠标移动变为彩色</h5>
<img src="../images/bg0.jpg" width="200" height="200">
</div>
<center>毛玻璃效果</center>
<div class="blur-box">
<div class="blur-img">这是毛玻璃效果</div>
</div>
</body>
</html>
文章浏览阅读1.1w次，点赞7次，收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout
文章浏览阅读218次。然后连接一个数据源，就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里，就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件
文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"
文章浏览阅读133次。删除node_modules，重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules
文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure
文章浏览阅读1w次，点赞13次，收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板
文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server
文章浏览阅读1.2k次，点赞2次，收藏3次。前言mybatis在持久层框架中还是比较火的，一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库，很是灵活。但正其操作都要通过SQL语句进行，就必须写大量的xml文件，很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d
文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c
文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学，wtcl。设要求的数为\(x\)。设当前处理到第\(k\)个同余式，设\(M = LCM ^ {k - 1} _ {i - 1}\) ，前\(k - 1\)个的通解就是\(x + i * M\)。那么其实第\(k\)个来说，其实就是求一个\(y\)使得\(x + y * M ≡ a_k(mod b_k)\)转化一下就是\(y * M ...
文章浏览阅读1.3k次。首先，问题是如何出现的？晚上复查代码，发现一个activity没有调用自己的ondestroy方法我表示非常的费解，于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy
文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何 您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数 导致堆栈溢出 sylixos