css实现毛玻璃效果,效果图

1,html代码

<div class="mainHolder">
<div class="textHolder">
<p>this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass</p>
</div>
</div>

2,css

 * {
box-sizing: border-box;
}
.mainHolder {
width: 100%;
height: 100%;
background-image: url(1.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.textHolder {
width: 400px;
height: 600px;
position: absolute;
left: 33%;
top: 20%;
background: inherit;
overflow: hidden;
}
.textHolder::before {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
background-attachment: fixed;
filter: blur(4px);
}
.textHolder::after {
content: "";
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.25);
}
p {
z-index: 1;
color: white;
position: relative;
margin: 0;
}

  

  

css实现毛玻璃效果的更多相关文章

  1. CSS 实现毛玻璃效果

    Part.1 HTML结构 <!-- 最外层盒子 --> <div class="box"> <!-- 添加毛玻璃效果盒子 --> <di ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

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

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  4. CSS遮罩效果和毛玻璃效果

    前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...

  5. 《CSS揭秘》之毛玻璃效果知识点

    实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...

  6. CSS技巧收集——毛玻璃效果

    先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...

  7. css透明度、毛玻璃效果

    透明度: 1.opacity    背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2);   只是背景颜色透明,字体不透明 代码: .info{ backgr ...

  8. 实现一个成熟的底层毛玻璃效果(纯CSS)

    写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...

  9. CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...

随机推荐

  1. vue 设置当前页背景色

    beforeRouteEnter(to, from, next) { // 添加背景色 document.querySelector('body').setAttribute('style', 'ba ...

  2. shell变量、函数和数组以及字符串的截取

    一.变量 1.shell变量名 (1)可以由字母.数字.下划线等字符组成.但是第一个字符必须是字母或者下划线. (2)若果变量中包含下划线(_)则要特别注意,$project_svn_$date.ta ...

  3. [CSP-S模拟测试]:中间值(二分)

    题目背景 $Maxtir$喜欢序列的中间值. 题目传送门(内部题127) 输入格式 第一行输入两个正整数$n,m$,其中$m$是操作和询问次数. 接下来两行每行输入$n$个非负整数,每一行分别表示两个 ...

  4. Java实现QQ微信轰炸机1.2(斗图乞丐版)

    之前有小可爱评论可以实现斗图的功能,原理上是行的通的,所以我就稍微改了一下,能够实现单个图片循环轰炸,如果大家感兴趣也可以自己探究实现多张图片循环轰炸,不废话了,直接上源码package QQWcha ...

  5. Contacts解析

    显示联系人相关类packages/apps/Contacts/src/com/android/contacts/activities/PeopleActivity.javapackages/apps/ ...

  6. snmpEngineBoots & snmpEngineID数据存储到非易失性存储设备

    #include <stdio.h> #include <stdlib.h> #include <string.h> int regenerateID() { ; ...

  7. leetcode-easy-others-461. Hamming Distance

    mycode  92.05% class Solution(object): def hammingDistance(self, x, y): """ :type x: ...

  8. c++ STL -- set和multiset

    set和multiset 1.结构 set和multiset会根据特定的排序原则将元素排序.两者不同之处在于,multisets允许元素重复,而set不允许重复. 只要是assignable.copy ...

  9. 全面解读php-正则表达式

    一.正则表达式基础内容 注: 1.通用原子: \d : 数字.  \D : 除了数字. \w : 数字,字母,下划线.\W : 除了数字,字母,下划线. \s  : 空白符 . \S : 除了空白符  ...

  10. linux新建用户tab无法补全命令

    查看passwd cat /ect/passwd 发现root用户的shell是/bin/bash 普通用户的shell是/bin/sh 修改普通用户的为/bin/bash即可