[精讚] [會員登入]
914

產生模糊的文字

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

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

你可能感興趣的文章

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

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

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

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

看懂DSUB DVI HDMI USB等各式影音接頭 看懂DSUB DVI HDMI等各式影音接頭

[AS3] 變數型態 基本類型宣告 as3 有下列幾種基本類型:string, int, number, object, boolean, n

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

Sound of Music @比利時中央車站 比利時中央車站的快閃表演:「真善美」

真正的喜悅 幾種喜悅的類型,雖然很簡單,卻是很多人百思不得其解的難題..