資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 濾鏡建立模糊圖片或文字
使用者發現帶有模糊背景的網站在視覺上看起來很美觀。但是您是否考慮過這種模糊是如何具體實現的呢？其實很簡單。讓我們看看如何使用 CSS 背景的模糊屬性來實現它。使用 CSS 濾鏡在影像或文字上生成模糊效果是常見的網頁開發方法，可以提高視覺吸引力或實現特定的設計風格。CSS 濾鏡可以改變網頁上專案的渲染方式，包括模糊。
在影像上使用 CSS 濾鏡：blur() 屬性時，需要對模糊半徑進行必要的調整。例如，filter: blur(6px);。使用相同的屬性可以獲得文字的模糊效果。這些簡單的方法可以透過突出顯示重要元件來改善網頁的外觀。嘗試不同的模糊設定，以獲得適合您設計的理想平衡。
filter 屬性的 blur 函式會為源影像新增高斯模糊。半徑決定了高斯函式的標準偏差的大小，或者螢幕上多少畫素混合在一起。如果未提供引數，則使用值 0。雖然為引數提供了 CSS 長度，但不允許使用百分比值。
示例
讓我們看下面的例子，我們將使用帶有效果的模糊文字
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
display: inline-block;
padding: 10px 20px;
margin: 10px auto;
letter-spacing: 3px;
background-color: #A569BD;
}
#tp span:nth-child(1) {
color: #FBFCFC;
font-size: 32px;
font-family: verdana;
}
#tp span:nth-child(2) {
color: #FBFCFC;
text-shadow: 0 0 4px #fff;
font-size: 33px;
font-family: verdana;
}
#tp span:nth-child(3) {
color: #FBFCFC;
text-shadow: 0 0 5px #fff;
font-size: 34px;
font-family: verdana;
}
#tp span:nth-child(4) {
color: #FBFCFC;
text-shadow: 0 0 6px #fff;
font-size: 35px;
font-family: verdana;
}
#tp span:nth-child(5) {
color: #FBFCFC;
text-shadow: 0 0 10px #fff;
font-size: 40px;
font-family: verdana;
}
</style>
</head>
<body>
<div id="tp">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
</body>
</html>
當我們執行上面的程式碼時，它將生成一個輸出，其中包含在網頁上帶有某些模糊效果的文字。
使用 filter 屬性
您可以透過更改元素內容的渲染方式來應用視覺效果和轉換，從而改變元素的外觀。CSS filter 屬性可以實現這一功能。您可以使用此屬性透過修改元素的顏色、亮度、對比度、模糊度和其他特徵來更改其外觀。除了影像，您也可以將 filter 屬性與其他 HTML 元件一起使用。
語法
以下是 CSS filter 屬性的語法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
示例
以下是一個示例，我們將使用 filter 屬性建立模糊影像。
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
filter: blur(3px);
}
body {
text-align: center;
background-color: #E8DAEF;
}
</style>
</head>
<body>
<div id="tp">
<img src="https://tutorialspoint.tw/cg/images/logo.png">
</div>
</body>
</html>
執行上述程式碼後，將彈出輸出視窗，在網頁上顯示模糊影像。
使用 text-shadow 屬性
CSS text-shadow 是一個屬性，它將為文字新增陰影。該屬性將接受可以應用於文字的陰影列表。它也可以進行動畫處理，這是一個重要的特性，因為它可以使您的網站更具視覺吸引力。
語法
以下是 CSS text-shadow 屬性的語法：
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
示例
在下面的示例中，我們將使用 text-shadow 屬性建立模糊文字。
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
font-size: 45px;
font-family: verdana;
color: transparent;
text-shadow: 0 0 9px #DE3163;
}
body {
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<div id="tp">TUTOIALSPOINT</div>
</body>
</html>
當我們執行上面的程式碼時，它將生成一個輸出，其中包含在網頁上顯示的模糊文字。
251 次檢視
