有時我們需要產生模糊的文字，類似毛玻璃看到的效果

例如：

方法很簡單，只要使用 blur 的屬性即可

filter: blur(3px);
-webkit-filter: blur(3px);

第二行是適用於 firefox類的瀏覽器，但新的瀏覽器第一行也能辨視

一般而言我們會希望在模糊的文字前加上一個灰色的區塊，擋住文字內容，同時請使用者按下登入或註冊之類的按鈕，該怎麼做？

例如

HTML

<section class="container ">
  <div>
    精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字<br />
    精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字<br />
    精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字<br />
    精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字精誕測試文字<br />
  </div>
  <div class="bluezone">
    模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 <br />
    模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 <br />
    模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 <br />
    模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 <br />
    模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 <br />
    模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 模糊被遮住的文字 <br />
  </div>
  <div class="blocked-banner">
    <div class="body">
      PLEASE LOGIN LINK
    </div>
  </div>
</section>

CSS

.container {
    position: relative;
}

.blocked-banner {
    position: absolute;
	bottom: 0;
	left: 0;
	display: inline-block;
	border-radius: 0;
	box-shadow: none;
	width: 100%;
	margin: 0;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.2);
        padding:32px 0px;
}

.blocked-banner .body {
	background-color: white;
	display: inline-block;
	max-width: 300px;
	padding: 20px 5px;
	box-shadow: 0 0 20px 5px grey;
	border-radius: 3px;
	float: none;
}
.bluezone {
  filter: blur(3px);
 -webkit-filter: blur(3px);
}

自己試試

https://jsfiddle.net/uhooz/oqxnj1f4