首頁 > 文章 > web前端 > CSS中如何設定模糊距離？

CSS中如何設定模糊距離？

WBOY轉載: 2023-09-01 22:37:021487瀏覽

CSS中如何設定模糊距離？

CSS（層疊樣式表）是設計網站視覺效果的強大工具。模糊效果是CSS中的眾多功能之一，它用於使用#模糊來模糊任何元素財產。要創造柔和、夢幻的效果或將注意力吸引到頁面上的特定元素，我們可以使用模糊效果。

文法

css element {
   filter : blur (amount)
}

CSS中模糊距離的概念

在討論設定模糊距離的實際方面之前，了解模糊距離的概念很重要。應用於元素的模糊量稱為模糊距離。該值可以用像素 (px)、em 或其他 CSS 單位來定義。

如何使用「blur」屬性在 CSS 中套用模糊距離

要在CSS中設定模糊距離，需要使用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://www.tutorialspoint.com/dip/images/einstein.jpg" alt="My Image">
</body>

我們可以對網頁中的不同元素套用不同的模糊距離。為此，我們可以單獨選擇每個元素並將“模糊”屬性設定為所需的值。例如 -

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://www.tutorialspoint.com/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 中設定模糊距離是為網頁添加視覺吸引力的簡單而有效的方法。透過以下範例，您可以輕鬆在網頁上建立模糊效果。

以上是CSS中如何設定模糊距離？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何將文字放置在已建立的圖示內部？下一篇：如何將文字放置在已建立的圖示內部？

看更多