CSS改变图片由模糊到清晰
2015-11-03 16:13
471 查看
使用纯CSS使用的图片初始为模糊,鼠标放在图片上后变得清晰。使用滤镜的可以实现。
模糊时的图片: 清晰后的图片:
ImgFuzzyToDistinct.css文件:
前台调用:
模糊时的图片: 清晰后的图片:
ImgFuzzyToDistinct.css文件:
.highlightit img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; } .highlightit:hover img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1;
前台调用:
<a href="http://blog.csdn.net/lovegonghui/article/details/49617673" class="highlightit"><img border="0" src="2500.jpg" alt=""></a>
相关文章推荐
- 按钮样式集合
- 分享4种CSS3效果(360度旋转、旋转放大、放大、移动)
- html表格及样式 长年复制用
- css实现垂直居中6种方法
- 重温CSS:Border属性
- No change while using CSS <form target="blank">
- CSS中英文字体
- 各种主流浏览器CSS、BUG兼容-
- CSS基础学习五:类选择器
- css文件和js文件后面带一个问号----2015-1103
- CSS3之过渡Transition
- css3实现让人有点击欲望的按钮
- CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式
- tr:hover变色的问题
- 我理解的css
- CSS3表单input输入框美化
- CSS 属性选择器详解
- css id选择器详解
- css表格
- css框模型