当前位置：首页 > JavaScript

js实现图片渐变效果

2026-04-04 10:57:36JavaScript

使用CSS实现图片渐变叠加

通过CSS的linear-gradient或radial-gradient结合background-blend-mode属性，可以直接实现图片与渐变的混合效果：

.gradient-overlay {
  background-image: 
    linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,0,255,0.5)),
    url('your-image.jpg');
  background-blend-mode: overlay;
  width: 300px;
  height: 200px;
}

Canvas绘制渐变图片

利用Canvas 2D API可以动态创建渐变效果：

js实现图片渐变效果

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;

// 绘制原始图片
ctx.drawImage(img, 0, 0);

// 添加渐变覆盖
const gradient = ctx.createLinearGradient(0, 0, img.width, 0);
gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
gradient.addColorStop(1, 'rgba(0,0,255,0.5)');
ctx.fillStyle = gradient;
ctx.globalCompositeOperation = 'multiply';
ctx.fillRect(0, 0, img.width, img.height);

WebGL高级渐变效果

通过WebGL可以实现更复杂的渐变过渡：

const gl = canvas.getContext('webgl');
// 创建着色器程序
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

// 设置纹理和渐变参数
gl.uniform1i(gl.getUniformLocation(program, 'u_image'), 0);
gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
gl.uniform3f(gl.getUniformLocation(program, 'u_gradientFrom'), 1.0, 0.0, 0.0);
gl.uniform3f(gl.getUniformLocation(program, 'u_gradientTo'), 0.0, 0.0, 1.0);

SVG滤镜实现渐变

使用SVG滤镜可以创建非破坏性的渐变效果：

js实现图片渐变效果

<svg>
  <defs>
    <filter id="gradientFilter">
      <feColorMatrix type="matrix" values="..."/>
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5"/>
        <feFuncG type="linear" slope="0.5"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image xlink:href="image.jpg" filter="url(#gradientFilter)"/>
</svg>

动画渐变过渡效果

结合CSS动画实现动态渐变变化：

@keyframes gradientShift {
  0% { background-color: rgba(255,0,0,0.3); }
  50% { background-color: rgba(0,255,0,0.3); }
  100% { background-color: rgba(0,0,255,0.3); }
}

.animated-gradient {
  animation: gradientShift 5s infinite;
  mix-blend-mode: screen;
}

响应式渐变控制

通过JavaScript动态调整渐变参数：

window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / document.body.scrollHeight;
  element.style.background = `
    linear-gradient(
      to right,
      rgba(255,0,0,${scrollPercent}),
      rgba(0,0,255,${1-scrollPercent})
    )
  `;
});

每种方法适用于不同场景，CSS方案适合简单静态效果，Canvas适合动态处理，WebGL适合高性能需求，SVG适合矢量场景，而响应式控制可以实现交互效果。