css实现毛玻璃效果
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实现毛玻璃效果的更多相关文章
- CSS 实现毛玻璃效果
Part.1 HTML结构 <!-- 最外层盒子 --> <div class="box"> <!-- 添加毛玻璃效果盒子 --> <di ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- CSS遮罩效果和毛玻璃效果
前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...
- 《CSS揭秘》之毛玻璃效果知识点
实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- css透明度、毛玻璃效果
透明度: 1.opacity 背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2); 只是背景颜色透明,字体不透明 代码: .info{ backgr ...
- 实现一个成熟的底层毛玻璃效果(纯CSS)
写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...
- CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
随机推荐
- vue 设置当前页背景色
beforeRouteEnter(to, from, next) { // 添加背景色 document.querySelector('body').setAttribute('style', 'ba ...
- shell变量、函数和数组以及字符串的截取
一.变量 1.shell变量名 (1)可以由字母.数字.下划线等字符组成.但是第一个字符必须是字母或者下划线. (2)若果变量中包含下划线(_)则要特别注意,$project_svn_$date.ta ...
- [CSP-S模拟测试]:中间值(二分)
题目背景 $Maxtir$喜欢序列的中间值. 题目传送门(内部题127) 输入格式 第一行输入两个正整数$n,m$,其中$m$是操作和询问次数. 接下来两行每行输入$n$个非负整数,每一行分别表示两个 ...
- Java实现QQ微信轰炸机1.2(斗图乞丐版)
之前有小可爱评论可以实现斗图的功能,原理上是行的通的,所以我就稍微改了一下,能够实现单个图片循环轰炸,如果大家感兴趣也可以自己探究实现多张图片循环轰炸,不废话了,直接上源码package QQWcha ...
- Contacts解析
显示联系人相关类packages/apps/Contacts/src/com/android/contacts/activities/PeopleActivity.javapackages/apps/ ...
- snmpEngineBoots & snmpEngineID数据存储到非易失性存储设备
#include <stdio.h> #include <stdlib.h> #include <string.h> int regenerateID() { ; ...
- leetcode-easy-others-461. Hamming Distance
mycode 92.05% class Solution(object): def hammingDistance(self, x, y): """ :type x: ...
- c++ STL -- set和multiset
set和multiset 1.结构 set和multiset会根据特定的排序原则将元素排序.两者不同之处在于,multisets允许元素重复,而set不允许重复. 只要是assignable.copy ...
- 全面解读php-正则表达式
一.正则表达式基础内容 注: 1.通用原子: \d : 数字. \D : 除了数字. \w : 数字,字母,下划线.\W : 除了数字,字母,下划线. \s : 空白符 . \S : 除了空白符 ...
- linux新建用户tab无法补全命令
查看passwd cat /ect/passwd 发现root用户的shell是/bin/bash 普通用户的shell是/bin/sh 修改普通用户的为/bin/bash即可