資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 CSS 中設定模糊距離？
CSS（層疊樣式表）是用於設計網站視覺效果的強大工具。模糊效果是 CSS 的眾多功能之一，用於使用blur屬性模糊任何元素。為了建立柔和、夢幻的效果或吸引頁面上特定元素的注意，我們可以使用模糊效果。
語法
css element {
filter : blur (amount)
}
CSS 中模糊距離的概念
在討論設定模糊距離的實際方面之前，瞭解模糊距離的概念非常重要。應用於元素的模糊量稱為模糊距離。此值可以用畫素 (px)、em 或其他 CSS 單位定義。
使用“blur”屬性在 CSS 中應用模糊距離
要在 CSS 中設定模糊距離，可以使用 blur 屬性。“blur”屬性設定應應用於元素的模糊量。要使用“blur”屬性，我們首先選擇要應用模糊效果的元素，然後將“blur”屬性設定為所需值。
例如，要將模糊效果應用於影像，我們可以使用以下 CSS 程式碼：
img {
filter : blur(5px)
}
這裡，我們選擇了“img”元素，並對其應用了 5 畫素的模糊效果。
示例 1
以下是關於上述方法的完整程式碼示例。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
img {
filter: blur(3px);
}
</style>
</head>
<body>
<h3>Applying blur distance in CSS using the 'blur' property</h3>
<img src="https://tutorialspoint.tw/dip/images/einstein.jpg" alt="My Image">
</body>
我們可以將不同的模糊距離應用於網頁中的不同元素。為此，我們可以分別選擇每個元素並將“blur”屬性設定為所需值。例如：
h1 {
filter : blur(3px)
}
img {
filter : blur(5px)
}
這裡，我們首先選擇了兩個元素“h1”和“img”，並分別應用了 3 畫素和 5 畫素的模糊效果。
示例 2：將不同的模糊距離應用於不同的元素
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
p{
filter: blur(2px);
font-size: 20px;
color: red;
}
img {
filter: blur(3px);
}
</style>
</head>
<body>
<h3>Applying blur distance in CSS using the 'blur' property</h3>
<p>Applied blur distance 2 pixels in CSS using the 'blur' property</p>
<img src="https://tutorialspoint.tw/dip/images/einstein.jpg" alt="My Image">
</body>
</html>
在 CSS 中使用模糊距離建立焦點效果
建立焦點效果是 CSS 中模糊效果最常見的用途。此效果是透過對網頁上的所有元素應用模糊效果來實現的，但具有焦點的元素除外。
要在 CSS 中使用模糊距離建立焦點效果，可以使用“blur”屬性和“:not”偽類。“:not”偽類允許使用者選擇除特定元素以外的所有元素。例如：
.blur * {
transition: all 0.5s ease-in-out;
}
.blur:hover *:not(.no-blur) {
filter: blur(5px);
}
這裡，當用戶將滑鼠懸停在“blur”類上時，我們將“blur”屬性應用於“blur”類的所有子元素。此效果不適用於具有“no-blur”類的元素，因為使用“no”偽類會將具有“no-blur”類的元素排除在模糊效果之外。
示例 3
以下是關於上述方法的完整程式碼示例。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.blur * {
transition: all 0.5s ease-in-out;
}
.blur:hover *:not(.no-blur) {
filter: blur(5px);
}
</style>
</head>
<body>
<h2>Creating a focus effect with blur distance in CSS</h2>
<p> Hover over the below content to see the effect </p>
<div class="blur">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="no-blur">Click me</button>
</div>
</body>
</html>
結論
在 CSS 中設定模糊距離是為網頁新增視覺吸引力的簡單有效的方法。您可以藉助以下示例輕鬆地在網頁上建立模糊效果。
261 次檢視
