CSS中如何設定模糊距離？-css教學-PHP中文網

文法

CSS中模糊距離的概念

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

範例 3

Applying blur distance in CSS using the 'blur' property

範例 2：對不同元素應用不同的模糊距離

在 CSS 中建立具有模糊距離的焦點效果

Creating a focus effect with blur distance in CSS

Heading

結論

首頁

web前端

css教學

CSS中如何設定模糊距離？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 10:37 PM

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 id="Applying-blur-distance-in-CSS-using-the-blur-property">Applying blur distance in CSS using the 'blur' property</h3>
   <img src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/dip/images/einstein.jpg"  class="lazy" 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 id="Applying-blur-distance-in-CSS-using-the-blur-property">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="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/dip/images/einstein.jpg"  class="lazy" 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 id="Creating-a-focus-effect-with-blur-distance-in-CSS">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 id="Heading">Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button class="no-blur">Click me</button>
   </div>
</body>
</html>

登入後複製