js实现商品图片的透明

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Opacity Example</title>
<style>
  .transparent-image {
    opacity: 0.5; /* 设置透明度为50% */
  }
</style>
</head>
<body>

<img src="your-image-url.jpg" alt="Product Image" class="transparent-image">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Background Opacity Example</title>
<style>
  .image-container {
    background-color: rgba(255, 255, 255, 0.5); /* 白色背景，50%透明度 */
    padding: 10px;
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="your-image-url.jpg" alt="Product Image">
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Opacity Example</title>
<style>
  .transparent-image {
    transition: opacity 0.5s; /* 平滑过渡效果 */
  }
</style>
</head>
<body>

<img id="productImage" src="your-image-url.jpg" alt="Product Image" class="transparent-image">

<script>
  document.getElementById('productImage').addEventListener('mouseover', function() {
    this.style.opacity = '0.5'; // 鼠标悬停时变为半透明
  });

  document.getElementById('productImage').addEventListener('mouseout', function() {
    this.style.opacity = '1'; // 鼠标移出时恢复不透明
  });
</script>

</body>
</html>