使用css模拟vista毛玻璃效果
近来Windows Vista的毛玻璃效果一直受到界内同行的争相模仿。小弟不才,也来发表下自己的拙见。
首先准备两张背景图片,一张为正常图片,另外一张表现为正常图片的模糊效果。
利用css里面对背景的定义,将正常图片设置成为body节点的背景(注意body的margin必须设置为0,不然模糊的图片和正常的图片会有位置偏移),并且设置background-attachment的属性为fixed。
接下来在需要应用毛玻璃效果的图片上设置样式,将模糊图片设置为需求节点的背景,同样设置background-attachment的属性为fixed(需求节点的位置最好为绝对定位)。
这样模仿Windows Vista的毛玻璃效果就基本完成。
-------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
background-image:url(./back.jpg);
background-attachment:fixed;
}
div.glass{
background-image:url(./glass.jpg);
background-attachment:fixed;
position:absolute;
top:100px;
left:200px;
width:300px;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="glass"></div>
<div style="width:3000px;height:3000px;"></div>
</body>
</html>
-------------------------------------
PS:暂时不支持IE6以下版本,如果各位要使用,back.jpg为原背景,glass.jpg自己把原背景PS下成磨砂玻璃的效果图,大小跟原图一样吧。
转载于:https://www.cnblogs.com/top5/archive/2011/06/18/2084252.html
使用css模拟vista毛玻璃效果相关推荐
- css毛玻璃效果白边_使用css模拟vista毛玻璃效果
近来Windows Vista的毛玻璃效果一直受到界内同行的争相模仿.小弟不才,也来发表下自己的拙见. 首先准备两张背景图片,一张为正常图片,另外一张表现为正常图片的模糊效果. 利用css里面对背景的 ...
- CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...
- 图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计 标签:css 1297 发表评论 半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...
- 用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
- php毛玻璃,使用css怎么实现毛玻璃效果?
使用css怎么实现毛玻璃效果?下面本篇文章给大家介绍一下使用css实现毛玻璃效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 其实毛玻璃的模糊效果技术上比较简单,只是用到了 ...
- css实现图片毛玻璃效果
先上效果图 css代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- css如何实现毛玻璃效果
在苹果的官网上看到看到一个悬浮菜单的毛玻璃效果 被这种效果给吸引到了,深入源码后发现只通过两个css属性就能实现该效果. 苹果网站地址https://www.apple.com.cn/macos/bi ...
- CSS技巧收集——毛玻璃效果(深入理解滤镜filter)
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 原文链接 ...
- java做出毛玻璃效果_手把手教你CSS如何实现毛玻璃效果
今天在做一个登录界面的时候,由于视觉给的页面背景图片太鲜艳亮眼,导致页面中间的登录表单框很不显眼,效果很差.就想到了做成毛玻璃的效果,现在分享出来,大家一起看看吧. 页面结构如下: 由于之前用过CSS ...
- css透明度、毛玻璃效果
透明度: 1.opacity 背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2); 只是背景颜色透明,字体不透明 代码: .info{backgro ...
最新文章
- 树莓派上传文件到服务器,05_树莓派图片定时上传到服务器
- 2023年中国AI论文影响力超越美国?网友:长期看,数量不等于质量
- 连接数process与会话session
- 基于phantomJS实现web性能监控
- Asp.Net MVC 页面代码压缩筛选器-自定义删除无效内容
- 2021移动游戏生命周期研究玩家洞察报告
- 服务器压力测试系列二:服务器监控工具tsar安装
- Mybatis中的@SelectKey注解
- struts2.2 json配置
- UML基础: 统一建模语言简介
- sql server xp_cmdshell 命令
- poj 2442 Sequence
- python删除数据框中的字符串列_如何根据条件删除pandas数据框中的列?
- 从程序员到项目经理(2)
- 2021年全球电力线通信(PLC)系统收入大约7385.8百万美元,预计2028年达到14530百万美元,2022至2028期间,年复合增长率CAGR为11.0%
- 有n个人围成一圈,顺序排号。从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位。(java)
- 性能、应用、安装,选择LoRaWAN温湿度传感器的关键
- Excel查找2列相同的数据,并且返回对应列的另1列数据
- 在几何画板中如何制作圆柱的侧面展开动画_如何用几何画板做三棱柱的侧面展开动画...
- NeurIPS 2022 | PEMN:参数集约型掩码网络
热门文章
- Thingsboard 3.1.0 - UI修改
- 在html标签中写css样式,html style样式标签元素教程
- android短信安全,基于Android短信服务的手机安全监控系统的设计与实现
- 注入dll到explorer.exe中无反应_【干货】制鞋大底生产中常见问题及解决
- golang 连接多个mysql_Prometheus+Grafana监控MySQL
- Javascript特效:音乐导航
- linux设置开机自启动的方式总结
- JavaScript cookie js cookie设置
- 可计算行与计算复杂性多带图灵机实例
- 图像超分辨率重构(一)原理及方法总结