js 图片渐变

<div id="gradient-box" style="width: 300px; height: 300px;">
  <img id="my-image" src="your-image-url.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>

#gradient-box {
  position: relative;
}

#gradient-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
  pointer-events: none; /* 确保渐变层不会阻止点击事件 */
}

document.addEventListener("DOMContentLoaded", function() {
  const gradientBox = document.getElementById('gradient-box');
  
  // 动态改变渐变方向
  gradientBox.style.setProperty('--gradient-direction', 'to bottom');
  
  // 动态改变渐变颜色
  gradientBox.style.setProperty('--gradient-colors', 'rgba(255, 255, 0, 0.5), rgba(0, 255, 0, 0.5)');
});

#gradient-box::after {
  background: linear-gradient(var(--gradient-direction, to right), var(--gradient-colors, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)));
}