跳到主要内容

CSS 模糊效果

在现代网页设计中，视觉效果是吸引用户注意力的重要手段之一。CSS提供了多种方式来增强网页的视觉表现，其中之一就是模糊效果。通过模糊效果，你可以为图片、背景或其他元素添加柔和的边缘，使其看起来更加美观和专业。

什么是CSS模糊效果？​

CSS模糊效果是通过filter属性实现的，它允许你对元素应用图形效果，如模糊、亮度调整、对比度调整等。其中，blur()函数用于创建模糊效果。你可以通过指定模糊半径来控制模糊的程度。

基本语法​

css
filter: blur(radius);
  • radius：模糊半径，可以是像素（px）或其他长度单位。值越大，模糊效果越明显。

如何使用CSS模糊效果？​

让我们从一个简单的例子开始，展示如何为一个图片添加模糊效果。

示例1：模糊图片​

html
<img src="example.jpg" alt="Example Image" class="blurred-image">
css
.blurred-image {
  filter: blur(5px);
}

输出效果：

  • 图片将被模糊，模糊半径为5像素。
提示

你可以通过调整blur()函数中的值来控制模糊的强度。例如，blur(10px)会产生更强烈的模糊效果。

示例2：模糊背景​

除了图片，你还可以为背景添加模糊效果。以下是一个为div元素背景添加模糊效果的示例。

html
<div class="blurred-background">
  <p>这是一个带有模糊背景的文本。</p>
</div>
css
.blurred-background {
  background-image: url('background.jpg');
  filter: blur(8px);
  padding: 20px;
  color: white;
}

输出效果：

  • div元素的背景图片将被模糊，模糊半径为8像素。
警告

注意：直接对包含文本的元素应用模糊效果可能会导致文本也变得模糊。如果你只想模糊背景而不影响文本，可以考虑使用伪元素或其他技术。

实际应用场景​

1. 模态框背景模糊​

在弹出模态框时，模糊背景是一种常见的UI设计技巧，可以突出模态框内容并减少背景干扰。

html
<div class="modal-background">
  <div class="modal-content">
    <h2>模态框标题</h2>
    <p>这是模态框的内容。</p>
  </div>
</div>
css
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  filter: blur(10px);
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 10px;
}

输出效果：

  • 背景被模糊，模态框内容清晰可见。

2. 图片画廊中的焦点效果​

在图片画廊中，你可以通过模糊非焦点图片来突出显示当前选中的图片。

html
<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2" class="focused">
  <img src="image3.jpg" alt="Image 3">
</div>
css
.gallery img {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.gallery img.focused {
  filter: blur(0);
}

输出效果：

  • 非焦点图片被模糊，焦点图片保持清晰。

总结​

CSS模糊效果是一种简单而强大的工具，可以为你的网页设计增添视觉吸引力。通过filter: blur()，你可以轻松地为图片、背景或其他元素添加模糊效果。在实际应用中，模糊效果常用于模态框背景、图片画廊焦点效果等场景。

附加资源​

练习​

  1. 尝试为一个网页的头部背景图片添加模糊效果，并确保文本内容清晰可见。
  2. 创建一个图片画廊，使用CSS模糊效果突出显示当前选中的图片。

通过实践这些练习，你将更好地掌握CSS模糊效果的应用技巧。