css3 filter 滤镜_filter: blur(150px);-程序员宅基地

技术标签：前端

<!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>

本文链接：https://blog.csdn.net/sunjynyue/article/details/83583101

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

关于手机无法弹出谷歌通知栏验证的问题_通知栏收不到google登录通知-程序员宅基地

文章浏览阅读9w次，点赞19次，收藏90次。在我们在一些网站登录谷歌账号的时候可能会出现以下情况需要你在手机上谷歌弹出的通知栏上点是或者输入两位数字验证身份但是，有很多人的手机无法弹出以下弹窗要解决这个问题，我们首先要知道这个通知栏是google play服务弹出来的，之所以弹不出来是因为手机安装的google play服务有问题我们很多人选择安装谷歌套件时都会选择ourplay，如果你是使用ourplay安装的google play服务，就有可能会出现这种情况要想解决这个问题，最好的方法是重新安装它....._通知栏收不到google登录通知

数学建模中所需要使用到的Matlab（从零开始介绍）_数学建模需要哪些matlab模块-程序员宅基地

文章浏览阅读2.8k次，点赞12次，收藏124次。【代码】数学建模中所需要使用到的Matlab（从零开始介绍）_数学建模需要哪些matlab模块

大数据开发学习，大数据学习路线（完整详细版）_大数据组件学习路线-程序员宅基地

文章浏览阅读2.4w次，点赞67次，收藏552次。很多初学者，对大数据的概念都是模糊不清的，大数据是什么，能做什么，学的时候，该按照什么线路去学习，学完往哪方面发展，想深入了解，想学习的同学欢迎加入大数据学习qq群：199427210，有大量干货（零基础以及进阶的经典实战）分享给大家，并且有清华大学毕业的资深大数据讲师给大家免费授课，给大家分享目前国内最完整的大数据高端实战实用学习流程体系在巨大的数据集中进行筛选的最好工具是什么?以下是..._大数据组件学习路线

狂神说Java-Redis笔记_【狂神说java配套笔记】redis精讲-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏20次。文章目录一、Nosql概述为什么使用Nosql？什么是NosqlNosql特点阿里巴巴演进分析Nosql的四大分类二、Redis入门概述环境搭建Windows安装Linux安装测试性能基础知识三、五大数据类型Redis-keyString(字符串)List(列表)Set(集合)Hash（哈希）Zset（有序集合）四、三种特殊数据类型Geospatial(地理位置)Hyperloglog(基数统计)BitMaps(位图)五、事务事务操作过程事务错误监控六、Jedis七、SpringBoot整合八、自定义Red_【狂神说java配套笔记】redis精讲

c++ MFC int与CString互转_c++将int转换为cstring-程序员宅基地

文章浏览阅读3.7k次。int s = 123; CString str;str.Format("%d",s); 这样就可以了，但是有的会提示这个错误如果出现这个错误，就改成下面这个就OK了： str.Format(_T("%d"), s);FROM:http://liguo125.blog.51cto.com/1995200/448711_c++将int转换为cstring

决策树 Decision Tree_决策树的性能评价指标-程序员宅基地

文章浏览阅读1.6k次，点赞3次，收藏17次。本文主要简单介绍了决策树的基本概念，优缺点，应用场景，决策树建模时的注意事项，python的实现方法，案例和模型参数等。_决策树的性能评价指标

随便推点

Python基础之基础I-程序员宅基地

文章浏览阅读80次。Python的诞生背景python的创始人为吉多·范罗苏姆（Guido van Rossum）。1989年的圣诞节期间，吉多·范罗苏姆(中文名字：龟叔)为了在阿姆斯特丹打发时间，决心开发一个新的脚本解释程序，作为ABC语言的一种继承。(龟叔：2005年加入谷歌至2012年，2013年加入Dropbox直到现在，依然掌握着Python发展的核心方向，被称为仁慈的独裁者)。2017年7月的TIOBE排行榜，Python已经占据第四的位置， Python崇尚优美、清晰、简单，是一个优秀并广泛使用的语言。