毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

原创最新推荐文章于 2024-03-19 14:58:33 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现毛玻璃效果，通过设置背景图片和应用模糊滤镜，创建了一个具有视觉吸引力的毛玻璃背景。文章还探讨了定位和溢出处理的方法，确保效果在不同屏幕尺寸下的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
	 <div class="content">
           毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果
	 </div>
</body>

<style>
         body {
			background: url("https://www.diablo3.cn/d/file/yxgl/yxgl/2020-01-08/50f202f0fc045dc8028246de53d9dc62.png") center center / cover no-repeat fixed;
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
           }
           .content {
				height: 400px;
				width: 600px;
				word-break: break-all;
				z-index: 10;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -200px; 
				margin-left: -300px;  /*不能用transform: translate(-50%, -50%)来代替，否则效果不是我们想要的，目前不知原因。*/
				overflow: hidden; /* 为防止效果不超出 content 的范围*/	
            }
            .content:before {
				content: '';
				background: url("https://www.diablo3.cn/d/file/yxgl/yxgl/2020-01-08/50f202f0fc045dc8028246de53d9dc62.png") center center / cover no-repeat fixed;
				filter: blur(20px);
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: -1;
				margin: -30px; /*为解决元素的边缘模糊的效果减弱*/
               }
     </style>

在这里插入图片描述