本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于纯CSS实现底层毛玻璃效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)
现提供一个代码很直白且实现效果良好的实现方案,改良自W3Schools
HTML部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html>
<html dir= "ltr" >
<head>
<meta charset= "utf-8" >
<title>FrostedGlass</title>
<link rel= "stylesheet" href= "frostedGlass.css" >
</head>
<body>
<div>
<div>
<p>this is FrostedGlass</p>
</div>
</div>
</body>
</html>
|
.mainHolder是主框体
.textHolder是毛玻璃区域
.p是浮于毛玻璃上的文字内容
CSS部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | * {
box-sizing: border-box;
}
.mainHolder {
width: 600px;
height: 600px;
background-image: url(https:
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.textHolder {
width: 100%;
height: 200px;
position: absolute;
right: 0;
bottom: 0;
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;
}
|
解决毛玻璃效果里最核心的问题:模糊效果不能影响字体,采用了伪元素::after于::before
值得注意的是,在p标签里的position属性。设置为relative后,会将p从被遮挡状态“提起来”。
另外,对于不同的浏览器内核,filter的写法会有些许不同。
以上就是纯CSS实现底层毛玻璃效果(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css实现发光的按钮效果(代码示例)
什么是css盒子模型?
html实现在消息按钮上增加数量角标的实现代码
html中图片怎么居中对齐?
css如何让文字水平排列
css选择器的分类有哪些
css3中渐变属性有哪些
html中type是什么意思
jquery如何动态添加删除css样式?(代码示例)
html怎么调用下级目录的图片
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 纯CSS实现底层毛玻璃效果(代码示例)