[精讚] [會員登入]
984

產生模糊的文字

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

分享此文連結 //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

你可能感興趣的文章

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

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

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

如何在linux下執行java 原生的java應用程式可以使用簡單的方法在console下面寫出來,適合作簡單的應用

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

[Freebsd] 定時測試 ADSL 是否斷線並重連 中華電信 ADSL 雖有固定 ip,可是他卻會不定時「斷線」, 使用以下的 方法可以定時測試是否斷線,以及重新撥接。

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

UTF-8的網頁但IE8一片空白 UTF8編碼的網頁在Firefox 正常顯示、但IE8 就是空白,IE8編碼設定是「自動偵測」可是自動偵測到的是 big5...