[精讚] [會員登入]
1081

產生模糊的文字

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

分享此文連結 //n.sfs.tw/14651

分享連結 產生模糊的文字@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2020-06-06 22:59:00 最後編修
2020-06-06 15:37:13 By 張○○
 

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

例如:

方法很簡單,只要使用 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

 

 

END

你可能感興趣的文章

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

CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

隨機好文

沒有非誰做不可的事,也沒有不可被取代的人 沒有非誰做不可的事,也沒有不可被取代的人

[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?

安裝SPHINX支援中文 新版本的 sphinx 和舊版不同,網路上很多範例和教學是不能用的。此文是安裝和設定方法分享

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

維修冰箱 維修冰箱