1. 模糊

blue 滤镜能实现页面模糊效果，即在一个方向上的运动模糊；
语法格式如下所示：

blue(radius)

radius 参数表示接单单个参数半径，该参数半径以长度形式保存模糊半径；

例子 1：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模糊</title><style type="text/css">img{height:350px;width: 450px;}</style></head><body><div class="e"><p style="font-size: 30px;font-weight: bold;color: blue;">Blur 滤镜效果图</p></div>原图<img src="img/1.jpg" >模糊1<img src="img/1.jpg" style="filter: blur(11px);"><br>模糊2<img src="img/1.jpg" style="filter: blur(6px);"></body>
</html>

2. 透明色背景

例子2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Chroma滤镜</title><style>div{width: 550px;height: 550px;line-height: 35px;text-align: center;margin: 0 auto;}.d1{background: rgb(220, 38, 38, 1);}.d2{background: rgb(220, 38, 38, 0.7);/* 或使用rgba */} p{font-size: 30pt;font-weight: bold;               }</style></head><body><div><p class="d1">未使用透明色背景效果前</p><p class="d2">使用透明色背景效果后</p></div></body>
</html>

CSS 3之模糊与透明色背景相关推荐

CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
CSS揭秘：6.复杂的背景图案（上）
文章目录前言一.网格 1. 实色网格 2. 边框网格 3. 波点 4. 棋盘小结相关阅读前言上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背 ...
vue在html中写style,vue开发之style（六）（CSS页面布局之样式、背景、文字）
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法还有vue的使用,重点就在webpack这个: vue开发之webpa ...
php背景图片透明度,css如何使用opacity属性给背景图片加透明度（代码）
本篇文章给大家带来的内容是关于css如何使用opacity属性给背景图片加透明度(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS 中无法直接给背景图片加 opacity ...
CSS揭秘：6.复杂的背景图案（下）
文章目录前言一.网格Svg svg css 小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...
html语言设置网页背景,HTML+CSS入门设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
HTML怎么做成多彩背景,纯html+div+css模拟酷炫彩色渲染背景
纯html+div+css模拟酷炫彩色渲染背景 www.html.com.cn 出品 html> 纯div+css模拟酷炫彩色渲染背景 /* 自写js */ body{ /*padding:0; ...
html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...

CSS 3之模糊与透明色背景

模糊

1. 模糊

2. 透明色背景

CSS 3之模糊与透明色背景相关推荐

最新文章

热门文章