模糊实例

图片使用高斯模糊效果:

img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}

css语法:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

更多效果可参考官网 https://www.runoob.com/cssref/css3-pr-filter.html

css实习滤镜效果(背景图模糊)的更多相关文章

  1. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  2. webpack中,css中打包背景图,路径报错

    css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...

  3. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  4. css — 定位、背景图、水平垂直居中

    目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...

  5. HTML引用CSS实现自适应背景图

    链接图片背景代码 body {background: url('链接') no-repeat center 0;} 颜色代码 body{background:#FFF} 链接图片背景代码2 <b ...

  6. 关于CSS设置页面背景图的一些疑问

    关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出 ...

  7. 在css中设置图片的背景图,怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  8. vue-cli打包后dist文件运行空白和背景图显示问题详解

    1.文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. ...

  9. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

随机推荐

  1. 驱动通信:通过PIPE管道与内核层通信

    在本人前一篇博文<驱动开发:通过ReadFile与内核层通信>详细介绍了如何使用应用层ReadFile系列函数实现内核通信,本篇将继续延申这个知识点,介绍利用PIPE命名管道实现应用层与内 ...

  2. 从SpringBoot启动,阅读源码设计

    目录 一.背景说明 二.SpringBoot工程 三.应用上下文 四.资源加载 五.应用环境 六.Bean对象 七.Tomcat服务 八.事件模型 九.配置加载 十.数据库集成 十一.参考源码 服务启 ...

  3. .Net CLR异常简析

    楔子 前面一篇研究了下C++异常的,这篇来看下,CLR的异常内存模型,实际上都是一个模型,承继自windows异常处理机制.不同的是,有VC编译器(vcruntime.dll)接管的部分,被CLR里面 ...

  4. vue项目Eslint和prettier结合使用

    一.eslint介绍--代码语法检查工具 Eslint是一个代码检查工具,用来检查你的代码语法是否符合指定的规范,ECMAScript标准 二.prettier插件--代码格式化工具 prettier ...

  5. 在CentOs7虚拟机Linux离线安装mysql5.6(亲测可用)

    在该博主博客的的基础上进一步改进:https://blog.csdn.net/zhousq8929/article/details/117223255 文章目录 1.在官网下载mysql-5.6.36 ...

  6. LcdTools如何实现PX01读取SD中BIN文件并通过端口发出去

    在实际应用中我们会碰到需要下载很大容量固件,比如TP固件几百K大小BIN文件,这种情况下用LcdTools写初始化代码的方式实现就不大现实:此时我们可以通过PX01 SD来实现. 首先,把需要操作的B ...

  7. 4.pygame快速入门-事件监听

    事件event:游戏启动后,用户针对游戏的所有操作 监听:在游戏循环中,判断用户的具体操作 pygame中通过pygame.event.get()可以获得当前用户所做动作的事件列表   事件监听 wh ...

  8. 题解 CF327A Flipping Game

    前言 数据水的一批,\(\mathcal{O}(n^3)\) 给过我觉得是不应该的. 题意 有一个由 \(0\) 和 \(1\) 组成的序列 \(a_1,a_2,a_3,a_4....,a_n\) . ...

  9. 基于FPGA的AES加解密IP

    Programmable AES Encryption/ Decryption IP 可编程AES加解密IP 可编程AES加解密IP提供了加解密算法功能,兼容美国国家标准与技术研究院(NIST)发布的 ...

  10. 并发编程之 ThreadLocal

    前言 了解过 SimpleDateFormat 时间工具类的朋友都知道,该工具类非常好用,可以利用该类可以将日期转换成文本,或者将文本转换成日期,时间戳同样也可以. 以下代码,我们采用通用的 Simp ...