旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

纯CSS完成底层毛玻璃结果(代码示例)【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:84


导读:本篇文章给人人带来的内容是关于纯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完成底层毛玻璃结果(代码示例)的细致内容,更多请关注ki4网别的相干文章!

标签:csshtml