[精讚] [會員登入]
662

產生模糊的文字

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

分享此文連結 //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、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

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

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

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

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

為什麼要買長達二十年的保單? 為什麼要買長達二十年的保單?找一個可以說服我買二十年保單的理由。

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做?

好用的3+2碼郵遞區號查詢系統推薦 網路上找到用地址輸入判斷3+2碼郵遞區號的辨識率不高,除了這個網站…

[PHP] 檢查檔案是否是圖檔 使用getimagesize函數檢查檔案是否是圖檔

「許功蓋」的字以及源由 有玩過電腦一段時間的人,都聽過這個人(有一天我才發現7年級的竟然都不認識這個