CSS3毛玻璃
主要是给背景用filter:blur属性(要加上浏览器内核以兼容各种浏览器),背景虚化后,再对不用虚化的内容比如图片和文字,让他们定位到相应的位置。
-
.container{
-
width:650px;
-
height: 400px;
-
background: url(./images/background.jpg) fixed no-repeat;
-
position: relative;
-
}
-
.pic{
-
width:650px;
-
height: 400px;
-
background: inherit;
-
-webkit-filter:blur(5px);
-
-moz-filter:blur(5px);
-
-o-filter:blur(5px);
-
filter:blur(5px);
-
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
-
}
-
.weather{
-
width:80px;
-
height: 80px;
-
display: block;
-
position: absolute;
-
top:30%;
-
left:40%;
-
}
-
.text{
-
display: block;
-
position: absolute;
-
top:30%;
-
left:40%;
-
color:white;
-
font-size: 25px;
-
}
-
<div class=“container”>
-
<div class=“pic”></div>
-
<img src=“./images/a.jpg” alt=“” class=“weather”>
-
<span class=“text”>北京 晴 3-5C</span>
-
</div>
有的时候会看到这个filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=6, MakeShadow=false); /* IE6~IE9 */。这是代表要支持IE6~IE9。
滤镜说明:
Alpha:设置透明层次
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样
为你推荐
标签
Adminer
Apache
Apache OFBiz
AppArmor
Brotli
CentOS
CentOS 8
CMS
CouchDB
Debian
Debian 10
Django
Docker
DokuWiki
Drupal
ExpressionEngine
Flatpak
FreeBSD
FTP
Git
Gitea
Graylog
Horde Webmail
ISPConfig
Java
Let's Encrypt
Linux
MariaDB
Microweber
MySQL
NextCloud
NGINX
ONLYOFFICE
OpenLiteSpeed
Oracle
PHP
Rudder
Server IDE
Spark
SSL
TLS
Ubuntu
Ubuntu 18.04
Ubuntu 20.04
Zabbix