返回

用 CSS 和 SVG 实现彩色图片阴影

前端

在网页设计中，图片的视觉效果至关重要。彩色图片阴影不仅能增加图片的层次感，还能提升整体的美观度。本文将详细介绍如何利用 CSS 和 SVG 实现彩色图片阴影，帮助开发者轻松达到理想的视觉效果。

一、实现原理

彩色图片阴影的实现原理相对直观。基本思路是使用一张原图和一张经过模糊处理的图片，然后将这两张图片叠加在一起。具体步骤如下：

  1. 准备一张原图和一张模糊的图片。模糊图片可以通过图像编辑软件对原图进行处理获得。
  2. 将两张图片叠加。这一步可以通过 CSS 的 box-shadow 属性或 SVG 的滤镜功能实现。
  3. 调整阴影的颜色和模糊半径，以达到预期的视觉效果。

二、CSS 实现

使用 CSS 实现彩色图片阴影是一种简便的方法。以下是具体步骤：

步骤详解

  1. 准备图片：首先需要一张原图和一张模糊的图片。
  2. HTML 结构：在 HTML 中添加图片元素，并设置图片路径。 
    <img src="original.jpg" alt="Original Image">
  3. CSS 样式：在 CSS 中为图片添加 box-shadow 属性。 
    img {
  box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);
}
    这里的 box-shadow 属性参数解释如下：
    • 第一个参数（0 0）表示阴影的水平和垂直偏移量。
    • 第二个参数（10px）表示阴影的模糊半径。
    • 第三个参数（5px）表示阴影的扩散半径。
    • 第四个参数（rgba(255, 0, 0, 0.5)）表示阴影的颜色和透明度。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>彩色图片阴影示例</title>
  <style>
    img {
      box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <img src="original.jpg" alt="Original Image">
</body>
</html>

三、SVG 实现

使用 SVG 实现彩色图片阴影虽然稍微复杂一些，但提供了更高的灵活性。以下是具体步骤：

步骤详解

  1. 准备图片：同样需要一张原图和一张模糊的图片。
  2. SVG 结构：在 SVG 中添加 <defs> 元素，用于定义图形元素。
  3. 滤镜定义：在 <defs> 中添加 <filter> 元素，并设置模糊和偏移效果。 
    <filter id="shadow">
  <feGaussianBlur stdDeviation="10" />
  <feOffset dx="5" dy="5" />
  <feMerge>
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="Blur" />
  </feMerge>
</filter>
  4. 应用滤镜：将定义好的滤镜应用到图片元素上。 
    <image href="original.jpg" width="500" height="500" filter="url(#shadow)" />

示例代码

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feGaussianBlur stdDeviation="10" />
      <feOffset dx="5" dy="5" />
      <feMerge>
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="Blur" />
      </feMerge>
    </filter>
  </defs>
  <image href="original.jpg" width="500" height="500" filter="url(#shadow)" />
</svg>

四、总结

通过 CSS 和 SVG 实现彩色图片阴影的方法简单有效，能够显著提升网页的视觉效果。开发者可以根据具体需求选择合适的方法。希望本文的介绍能够帮助您在实际项目中更好地应用这些技术。

相关资源