css3制作毛玻璃效果的示例代码详解
忙里偷闲，最近又在看许多比较酷炫的效果。现在基于jquery的插件比较多，但是很多插件的兼容性不是太好，所以原生的才是王道。在日常当中，毛玻璃已经不常见了，那是一个很久远年代的东西了。诺，下面就是毛玻璃：
哈哈，不闲扯了，接下来不如正题吧，先看一下终极效果：
嗯，好了，，开始我们的步骤吧：
第一步：进行页面的基本搭建：
我在body上设置了一张大大的背景图，然后中间部分是一个p,html代码如下：
<body>
<p >
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.
</p>
</body>文字多是为了撑开p使其效果更明显
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;
}
p {
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%，background设置的为固定位置，铺满整个元素；在p当中，居中设置背景色然后设置其盒子样式；然后是这个样子滴：
亮堂堂的小透明玻璃就这么出来了，那么开始我们的毛玻璃加工吧
第二步：背景模糊的毛玻璃设置
在css当中，有同一个关于模糊度的设置，为
filter: blur(20px);
后面的数值为模糊度的大小，数值越大越模糊啊，但是目前只支持px,不支持百分比；
我们直接给p加这个样式是不行的，因为这样会连子都变得模糊，这个时候我们可以利用伪元素，即::before；
我们使用伪元素之前，需要给p加一个相对定位，由于伪元素使用模糊度以后会溢出整个p盒子，为了美观漂亮大气上档次，我们需要给p加overflow:hidden；即：
overflow: hidden; position: relative;
p的伪元素：
p::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代码中我们可以看出，设置的模糊度，和p是重叠的，背景图也是和body一样的，最终效果如下：
以上是css3制作毛玻璃效果的示例代码详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
纯CSS3怎么实现波浪效果？（代码示例）
Jun 28, 2022 pm 01:39 PM
纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！
css怎么隐藏元素但不占空间
Jun 01, 2022 pm 07:15 PM
两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。
css3怎么实现花边边框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
css3如何实现鼠标点击图片放大
Apr 25, 2022 pm 04:52 PM
实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。
原来利用纯CSS也能实现文字轮播与图片轮播！
Jun 10, 2022 pm 01:00 PM
怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
css3怎么设置动画旋转速度
Apr 28, 2022 pm 04:32 PM
在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。
CSS 毛玻璃属性优化技巧：filter 和 backdrop-filter
Oct 20, 2023 am 08:34 AM
CSS毛玻璃属性优化技巧：filter和backdrop-filter在现代网页设计中，毛玻璃效果（Blur）被广泛应用于一些界面元素的背景或者图片上，以提供一种模糊、柔和的视觉效果。过去，实现毛玻璃效果的方法主要是通过使用图片处理软件对图片进行模糊处理，然后将模糊的图片作为背景使用。然而，这种方法需要额外的图片资源，而且无法动态调整模糊效果的程度。而
