css3毛玻璃背景-使用css3制作磨砂玻璃图文实例分享

bendan520 2023年8月29日 css3 0

百忙之中抽空css3毛玻璃背景，最近看了很多很酷的疗效。 现在基于jQuery的插件很多，而且很多插件的兼容性不是很好css3毛玻璃背景，所以原生才是王道。 在日常生活中，磨砂玻璃已经不再常见，它已经是很久以前的事情了。 不，这是磨砂玻璃：

哈哈，别啰嗦了，还是跑题了，我们先来看看最终的疗效：

好吧，好吧，让我们开始我们的步骤：

第一步：页面的基本构建：

我在body上设置了一个大背景图，然后中间部分是一个div，html代码如下：


    iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.

登录后复制

大部分文字都是拉伸div，让疗效更明显

css毛玻璃效果_背景的玻璃_css3毛玻璃背景

css的代码如下：

   body {
            min-height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(50vh - 6em);
            font: 150%/1.6 serif;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }
        div {
            margin: 0 auto;
            padding: 1em;
            max-width: 30em;
            border-radius: 0.3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
            background: hsla(0,0%,100%,.3);
        }

登录后复制

看里面的样式代码，body上，vh为图层大小，100为100%，背景设置为固定位置，覆盖整个元素； 在div中，设置中心的背景色，然后设置其包的样式； 之后它看起来像这样：

明亮的小透明玻璃就这样了，下面开始我们的磨砂玻璃加工吧

第2步：背景模糊磨砂玻璃设置

在css中，对于模糊度也有同样的设置，即

css3毛玻璃背景_css毛玻璃效果_背景的玻璃

滤镜：模糊（20px）；

旁边的值是模糊的大小，值越大越模糊，目前只支持px，不支持ratio；

我们不能直接将这种样式添加到div中，因为它会让孩子甚至显得模糊。 这时候我们就可以使用伪元素，即::before；

在我们使用伪元素之前，我们需要给div添加一个相对定位，因为伪元素使用二义性后会溢出整个div包。 为了美观、优雅，我们需要给div添加overflow:hidden； 那是：

css毛玻璃效果_css3毛玻璃背景_背景的玻璃

  overflow: hidden;
  position: relative;

登录后复制

div 的伪元素：

   div::before{
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            filter: blur(20px);
            margin: -20px;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }

登录后复制

在前面的css代码中，我们可以看到设置的blur与div重叠，背景图片与body相同。 最终效果如下：