当前位置：首页 > 行业动态 > 正文

html鼠标图片变暗

用CSS为图片添加:hover伪类，设置filter: brightness(50%)实现变暗，可加

实现原理

通过CSS的:hover伪类配合opacity或filter属性，在鼠标悬停时降低图片亮度，也可结合JavaScript实现更灵活的控制。

html鼠标图片变暗 第1张

基础实现（纯CSS）

HTML结构

<img src="image.jpg" alt="示例图片" class="darken-image">

CSS样式

.darken-image {
  transition: all 0.3s ease; / 添加过渡效果 /
}
.darken-image:hover {
  opacity: 0.6; / 降低透明度实现变暗 /
  / 或使用 filter: brightness(60%); /
}

完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">鼠标悬停图片变暗</title>
  <style>
    .darken-image {
      width: 300px;
      transition: 0.3s; / 平滑过渡 /
    }
    .darken-image:hover {
      filter: brightness(50%); / 亮度减半 /
      cursor: pointer; / 鼠标指针样式 /
    }
  </style>
</head>
<body>
  <img src="example.jpg" alt="示例" class="darken-image">
</body>
</html>

参数说明表

属性 作用 取值范围
opacity 设置透明度 0（完全透明）~1（不透明）
filter: brightness() 调整亮度百分比 0%（全黑）~100%（原图）
transition 过渡动画时长 数值（秒）或.3s简写

进阶实现（JavaScript控制）

适用场景

  • 需要动态控制变暗程度
  • 兼容不支持CSS filter的浏览器（如IE）

示例代码

<img id="myImage" src="example.jpg" alt="动态变暗" style="width:300px;">
<script>
  const img = document.getElementById('myImage');
  img.addEventListener('mouseenter', () => {
    img.style.filter = 'brightness(40%)'; // 鼠标进入时变暗
  });
  img.addEventListener('mouseleave', () => {
    img.style.filter = 'brightness(100%)'; // 鼠标离开恢复
  });
</script>

常见问题与解答

问题1：如何让图片变暗后保留文字可见？
解答：在图片上层叠加半透明容器， 

<div class="image-container">
  <img src="bg.jpg" alt="背景图">
  <div class="text">悬浮文字</div>
</div>
.image-container {
  position: relative;
}
.image-container:hover {
  filter: brightness(60%);
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
}

问题2：点击图片后如何保持变暗状态？
解答：通过JavaScript添加点击事件，切换CSS类： 

img.addEventListener('click', () => {
  img.classList.toggle('dark-mode'); // dark-mode定义变
HTML鼠标悬停
0

相关文章