CSS模糊背景毛玻璃效果

比较简单的CSS模糊背景毛玻璃效果，全屏固定背景（其实是两个图片，一张清晰一张模糊），毛玻璃效果是可以拖动的悬浮层，拖动超过底部时自动添加滚动条。

分类：悬浮层/弹出层 > 拖动难易：入门级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

头部引入CSS样式、jquery库之类：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

body部分比较简单，图片容器和一些文字说明：

<div id="box1" class="box blurred-bg tinted">
	<div class="content">
	    <h1>CSS模糊背景毛玻璃效果</h1>
		<h2>全屏固定背景</h2>
	  	<p>可以拖动的悬浮层</p>
	    <p class="related">拖动超过底部时自动添加滚动条</p>
	</div>
</div>

底部绑定一下拖拽事件：

$(function() {
	$( ".box" ).draggable();
});