css实现背景模糊案例

最新推荐文章于 2024-08-10 13:30:00 发布

A是曾同学呀

最新推荐文章于 2024-08-10 13:30:00 发布

阅读量509

点赞数 1

分类专栏： HTML+CSS 文章标签： css html html5 css3 前端

本文链接：https://blog.csdn.net/qq_45272642/article/details/120799928

版权

CSS filter 高斯模糊毛玻璃效果 CSS伪元素

关键词由CSDN通过智能技术生成

HTML+CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

通过filter属性实现，具体如下

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>高斯背景模糊效果（毛玻璃）</title>
		<style>
			.box {
				background: url('./img/timg.jpg') no-repeat 100% 100%;
				width: 750px;
				height: 400px;
				background-size: cover;
				position: relative;
			}

			.content {
				height: 60%;
				width: 60%;
				background: white;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -30%;
				margin-top: -16%;
				border-radius: 4px;
			}

			/* filter是对该元素的模糊，因此对content添加并模糊伪元素，并定位到content的下层，而不是直接修改背景图或content的样式 */
			.content::before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				filter: blur(3px);
				margin: -21px;
				background: url('./img/timg.jpg') no-repeat 100% 100%;
				background-size: cover;
				opacity: .8;
			}

			.content p {
				padding: 20px 15px;
				color: white;
				text-indent: 20px;
				font-size: 14px;
				line-height: 28px;
				letter-spacing: 1px;
				/* 清除子元素对父元素filter属性值的继承 */
				filter: blur(0);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eos adipisci perferendis quod
					repellendus commodi. Cum eveniet maxime quia quos voluptate officia itaque nesciunt voluptas ea
					adipisci. Fugiat voluptate enim.</p>
			</div>
		</div>
	</body>
</html>