Skip to content

Instantly share code, notes, and snippets.

@enihsyou

enihsyou/blur_1.html

Created July 10, 2018 11:33
Show Gist options
  • Save enihsyou/6c2b706433631e183d80519fef626ba9 to your computer and use it in GitHub Desktop.
Save enihsyou/6c2b706433631e183d80519fef626ba9 to your computer and use it in GitHub Desktop.
Download ZIP
使用blur filter 模糊的背景图层。一种使用单独的背景模糊图层，一种使用模糊的前景和清晰的背景
Raw
blur_1.html
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Blur background CSS</title>
<style>
body {
margin: 0;
}
/*被模糊的背景*/
#background {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
transform: scale(1.1);
background-image: url("https://wx1.sinaimg.cn/large/6f50820bgy1ft3t99jpnwj21ff0uytkh.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
filter: blur(8px);
}
/*上层内容*/
#content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
text-align: center;
}
</style>
</head>
<body>
<div id='app'>
<div id='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque distinctio, dolore esse illo iste laudantium necessitatibus odit optio perspiciatis quasi quisquam, reprehenderit sed! Asperiores doloremque earum enim esse officia, rerum?</p>
</div>
<div id='background'></div>
</div>
</body>
</html>
Raw
blur_2.html
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js'></script>
<title>Document</title>
<style>
body {
margin: 0;
}
#app {
width: 100vw;
}
/*清晰的背景*/
#background {
height: 100vh; /*设置整个需要背景图层的高度*/
background-image: url("https://wx1.sinaimg.cn/large/6f50820bgy1ft3t99jpnwj21ff0uytkh.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
margin-top: -200px;
z-index: 1;
}
/*被模糊的图层，在这里设置放置的位置*/
#blur-layer {
position: relative;
z-index: 2;
height: 200px; /*和上面的margin-top相同，因为position是relative的和z-index，这是两个图层，要让他们重叠*/
width: 400px;
top: 25vh;
left: 25vw;
}
/*被模糊的背景*/
#blur-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("https://wx1.sinaimg.cn/large/6f50820bgy1ft3t99jpnwj21ff0uytkh.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: blur(8px);
}
/*上层内容*/
#content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 1px 3px 4px rgba(0, 0, 0, .4);
text-align: center;
}
</style>
<script>
$(function() {
$('#blur-layer').draggable();
});
</script>
</head>
<body>
<div id='app'>
<div id='blur-layer'>
<div id='blur-bg'></div>
<div id='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque distinctio, dolore esse illo iste laudantium necessitatibus odit optio perspiciatis quasi quisquam, reprehenderit sed! Asperiores doloremque earum enim esse officia, rerum?</p>
</div>
</div>
<div id='background'></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment