css3复选框选中灰色变彩色图片特效

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 07:59:45

　　css3复选框选中灰色变彩色图片特效

CSS3 实现复选框选中时图片颜色变化

理解需求

当用户选中复选框时，希望与其关联的图片颜色发生变化，通常是变为彩色，以直观地显示选中状态。

实现方法

1. HTML 结构

HTML

<label>
  <input type="checkbox">
  <img src="gray_image.jpg" alt="灰色图片">
</label>

2. CSS 样式

CSS

label {
  display: inline-block;
  position: relative;
}

label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

label img {
  opacity: 0.5; /* 初始状态为灰色 */
  transition: opacity 0.3s ease-in-out;
}

label input[type="checkbox"]:checked + img {
  opacity: 1; /* 选中时变为彩色 */
}

代码解释

HTML 结构:
- label 标签包裹 input 和 img 元素，实现点击标签即可选中复选框。
- input 元素类型为 checkbox，用于实现复选框功能。
- img 元素显示图片，初始状态为灰色。
CSS 样式:
- label 设置为 inline-block，方便布局。
- input 元素设置 position: absolute 和 opacity: 0，隐藏复选框本身，只保留点击区域。
- img 元素设置初始 opacity 为 0.5，实现灰色效果。
- transition 属性用于创建过渡效果，使颜色变化更加平滑。
- :checked + img 选择器选中被选中状态的复选框后紧邻的 img 元素，将 opacity 设置为 1，实现彩色效果。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>复选框选中图片变色</title>
  <style>
    /* CSS样式 */
  </style>
</head>
<body>
  <label>
    <input type="checkbox">
    <img src="gray_image.jpg" alt="灰色图片">
  </label>
</body>
</html>