您的位置 首页 css教程

纯CSS实现底层毛玻璃效果(代码示例)

本篇文章给大家带来的内容是关于纯CSS实现底层毛玻璃效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

现提供一个代码很直白且实现效果良好的实现方案,改良自W3Schools

HTML部分

<!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部分

* {  box-sizing: border-box;}.mainHolder {  width: 600px;  height: 600px;  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);  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实现底层毛玻璃效果(代码示例)的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:纯CSS实现底层毛玻璃效果(代码示例)

文章地址:https://www.pyhw.net/40230_%e7%ba%afcss%e5%ae%9e%e7%8e%b0%e5%ba%95%e5%b1%82%e6%af%9b%e7%8e%bb%e7%92%83%e6%95%88%e6%9e%9c%ef%bc%88%e4%bb%a3%e7%a0%81%e7%a4%ba%e4%be%8b%ef%bc%89.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图