enihsyou/blur_1.html

## 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>

## 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>
	<!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>