如何为CSS background-image设置的图片添加鱼眼效果？

方法一：CSS SVG滤镜（推荐） #

SVG自定义滤镜可以精准实现鱼眼变形，直接适配你现有的背景图使用方式，无需调整元素结构。

1. 先在HTML中定义SVG滤镜（可放在页面任意位置，不占布局空间）：

<svg width="0" height="0" viewBox="0 0 100 100">
  <filter id="fisheye">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="base"/>
    <feDisplacementMap 
      in="SourceGraphic" 
      in2="base" 
      scale="25" 
      xChannelSelector="R" 
      yChannelSelector="G"
    />
    <!-- scale值控制鱼眼强度，数值越大变形越夸张 -->
  </filter>
</svg>

2. 给你的背景图元素应用该滤镜：

.your-bg-element {
  background-image: url(https://imgur.com/lTpbsD4);
  background-size: cover;
  background-position: center;
  filter: url(#fisheye);
  /* 若需要仅hover时生效，把filter放到:hover伪类中即可 */
}

如果需要限定变形范围（比如只让中心区域产生鱼眼），可以给滤镜添加feOffset或调整scale参数，结合feComponentTransfer进一步微调效果。

方法二：CSS变形模拟（简易版） #

如果不想用SVG，可通过3D透视缩放模拟近似鱼眼效果，实现成本极低：

.your-bg-element {
  position: relative;
  overflow: hidden;
  /* 容器基础样式 */
  width: 500px;
  height: 500px;
}

.your-bg-element::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(https://imgur.com/lTpbsD4);
  background-size: cover;
  background-position: center;
  transform: perspective(350px) scale(1.6);
  /* 调整perspective和scale的值控制变形程度，值越小变形越明显 */
}

这种方法通过中心放大、边缘拉伸模拟鱼眼，虽不如SVG精准，但足够快速实现需求。

方法三：Canvas JS实现（精准自定义） #

若需要动态调整鱼眼参数（比如交互控制变形强度），可通过Canvas绘制并处理图像：

1. HTML结构：

<div class="canvas-bg-container"></div>

2. JS代码：

const container = document.querySelector('.canvas-bg-container');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
container.appendChild(canvas);

// 适配容器尺寸
function resizeCanvas() {
  canvas.width = container.offsetWidth;
  canvas.height = container.offsetHeight;
  renderFisheye();
}

// 绘制鱼眼效果
function renderFisheye() {
  const img = new Image();
  img.crossOrigin = 'anonymous'; // 处理跨域图片加载
  img.src = 'https://imgur.com/lTpbsD4';
  img.onload = () => {
    // 先绘制原始图
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const [w, h] = [imageData.width, imageData.height];
    
    // 鱼眼参数：中心、半径、变形强度
    const center = { x: w/2, y: h/2 };
    const radius = Math.min(w, h)/2;
    const distortion = 2.2;

    // 遍历像素计算变形后坐标
    for (let y = 0; y < h; y++) {
      for (let x = 0; x < w; x++) {
        const dx = x - center.x;
        const dy = y - center.y;
        const dist = Math.sqrt(dx*dx + dy*dy);
        
        if (dist < radius) {
          const normDist = dist / radius;
          const distortedDist = Math.pow(normDist, distortion) * radius;
          const angle = Math.atan2(dy, dx);
          
          const newX = center.x + distortedDist * Math.cos(angle);
          const newY = center.y + distortedDist * Math.sin(angle);
          
          const origIdx = (y*w + x)*4;
          const newIdx = (Math.floor(newY)*w + Math.floor(newX))*4;
          
          // 赋值变形后的像素
          data[origIdx] = data[newIdx];
          data[origIdx+1] = data[newIdx+1];
          data[origIdx+2] = data[newIdx+2];
        }
      }
    }
    // 输出处理后的图像
    ctx.putImageData(imageData, 0, 0);
  };
}

// 监听窗口尺寸变化
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

3. 容器样式：

.canvas-bg-container {
  width: 500px;
  height: 500px;
}

这种方式可以完全自定义鱼眼的中心位置、影响半径和变形强度，适合需要精准控制或交互的场景。

内容的提问来源于stack exchange，提问作者Joao Moita