css实现毛玻璃效果

最新推荐文章于 2024-07-03 15:59:27 发布

GWJieiee

最新推荐文章于 2024-07-03 15:59:27 发布

阅读量362

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42811773/article/details/104677689

版权

css实现毛玻璃效果

实现效果如图所示：
在这里插入图片描述
通过三层重叠实现：（通过z-index设置顺序）

最外层是文字显示的content层

中间层是背景层

最底层为模糊的content:before层

中间和最底层顺序可以互换。

源代码如下：

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	    <style>

	    	.bg{

	    		background: url(img/pic1.jpg);

	    		margin: auto;

	    		position: relative;

	    		width: 600px;

	    		height: 500px;

	    		z-index: 0;

	    		}

	    	

	    	.content{

	    		width: 300px;

	    		height:300px;

	    		z-index: 1;

	    		border-radius: 5px;

	    		box-shadow: 0 10px 20px rgba(0,0,0,0.3);

	    		position: absolute;

	    		top: 25%;

	    		left: 25%;

	    		overflow: hidden;/*突出边缘*/

	    		background-size: cover;

	    	}

	    	.content:before{

	    		content: '';

	    		position: absolute;

	    		top: 0;

	    		left:0;

	    		z-index: -2;

	    		-webkit-filter: blur(15px);

	    		background-image:url(img/pic1.jpg);/*设置与大背景相同的背景图*/

	    		width: 300px;

	    		height: 300px;

	    		background-attachment: fixed;/*中间图与背景图拼接完全*/

	    		

	    	}

	    	h1{

	    		font-family: "微软雅黑";

	    		color: #fff;

	    		text-align: center;

	    		font-size: 50px;

	    	}

	    	p{

	    		font-family: "微软雅黑";

	    		color: #fff;

	    		text-align: center;

	    		font-size: 20px;

	    	}

	    </style>



	</head>

	<body>

		<div class="bg">

			<div class="content">

				<h1>CAT</h1>

				<p>a cat comimg from 360wallpaper,who seems quite lovely.

				</p>

			</div>

		</div>

			

	</body>

</html>

GWJieiee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现毛玻璃效果

css实现毛玻璃效果实现效果如图所示：通过三层重叠实现：（通过z-index设置顺序）最外层是文字显示的content层中间层是背景层最底层为模糊的content:before层中间和最底层顺序可以互换。源代码如下：<html> <head> <meta charset="UTF-8"> <title></ti...
复制链接

扫一扫