用css使图片产生毛玻璃效果

  毛玻璃的图片效果,使得其显示更加唯美,用户体验更佳,所以在手机端电脑端应用甚广

  比如ios系统:

  

  所以现在我们就来看看毛玻璃效果的实现方法吧:

  首先这是html的主要内容:

  

<div class="container">
    <div class="mat_class"></div>
    <p class="word">SHOW TIME</p>
</div>

  这里container用来放置文字

  mat_class是用来形成毛玻璃效果的容器;

 然后奉上关键的css部分:

.container{
            width: 960px;
            height: 600px;
            background-image: url(img/img.jpg);
        }
        .mat_class{
            position: relative;
            top: 200px;
            width: 960px;
            height: 200px;
            filter: blur(5px);
        }
        .word{
            color: white;
            position: relative;
            left: 240px;
            font-size: 80px;
        }
            




    代码很简单,我对值得注意的地方说明一下

    毛玻璃实现的灵魂在这句话上:

background-image: inherit;

    background-image默认是不会继承的,但如果设置了inherit,你适当的调节内层容器的长宽,然后你现在是什么感觉?

    从相机看世界的感觉!

附效果:

  原图:

  成功变身后:

以上

时间: 2024-10-13 09:14:54

用css使图片产生毛玻璃效果的相关文章

CSS之图片压盖效果案例分析

CSS之图片压盖效果案例分析 最近在做某个网站的静态页面,发现有很多图片压盖效果的布局,特来记录一下布局技巧. 碰到这种布局你会怎么做: 第一反应肯定是浮动,没错,可以把这几个图片放在ul列表的li标签里,给每个li标签内添加img和文字.如: <ul> <li> <img src="" alt=""><p>文字</p></li> <li><img src="&quo

如何利用CSS实现图片的透明效果

如何利用CSS实现图片的透明效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页的实际应用中,往往需要设置图片的透明度,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

css 使图片水平垂直居中

1.利用display:table-cell,具体代码如下: html代码如下: 1 <div class="img_wrap"> 2 <img src="wgs.jpg"> 3 </div> css代码如下: 1 .img_wrap{ 2 width: 400px; 3 height: 300px; 4 border: 1px dashed #ccc; 5 display: table-cell; //主要是这个属性 6 ver

【javascript/css】Javascript+Css实现图片滑动浏览效果

今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <script type="text/javascrip

图片毛玻璃效果

.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeS

IOS实现毛玻璃效果的三种方式

方式一:UIToolBar实现毛玻璃特效 在iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类,并且使用相当简单,几行代码就可以搞定. 1 /* 2 毛玻璃的样式(枚举) 3 UIBarStyleDefault = 0, 4 UIBarStyleBlack = 1, 5 UIBarStyleBlackOpaque = 1, // Deprecated. Use UIBarStyleBlack 6 UIBarStyleBlackTranslucent =

iOS 实现简单的毛玻璃效果

最近在整理导航栏的渐隐渐现效果,整理过程中偶然学会了图片的毛玻璃效果实现,很简单,不多说了,先上图看看效果对比, 这是原图, 这是加了效果后的,创建图片的代码就不上了,下面看下添加效果的代码: // 毛玻璃 /* 系统自带的三种风格 UIBlurEffectStyleExtraLight,//额外亮度,(高亮风格) UIBlurEffectStyleLight,//亮风格 UIBlurEffectStyleDark//暗风格 */ UIBlurEffect *effect = [UIBlurEf

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

CSS遮罩效果和毛玻璃效果

前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width