如何在Checkbox转成的带图Button选中/hover时仅改变图片透明区域颜色？

我用CSS把HTML里的Checkbox改成了带PNG图片的按钮，需求是按钮hover或选中时，只修改图片透明区域的颜色，不是整个按钮的颜色。目前hover状态的效果已经实现，但选中状态还没搞定——现有代码会改变整个按钮的颜色，求最优解决方案。

解决方案 #

核心思路是复用hover效果的mix-blend-mode混合模式逻辑，通过CSS的:has伪类关联Checkbox的选中状态到父容器的伪元素上，具体实现如下：

关键修改代码 #

在你已实现的hover效果代码基础上，添加选中状态的触发规则即可：

/* 保留已实现的hover效果 */
.cat.first label {
  position: relative;
  z-index: 1;
}

.cat.first::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  mix-blend-mode: multiply;
  z-index: -1;
}

.cat.first:hover::before {
  background-color: #424242;
}

/* 新增：Checkbox选中时的透明区域变色效果 */
.cat.first:has(input:checked)::before {
  background-color: #424242; /* 可替换为你需要的选中态颜色 */
}

完整CSS代码 #

body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  background-color: #535353;
}

.container{
  margin: 20px 10px 10px 37px;
}

.cat{
  display: inline-block;
  margin: 4px;
  background-color: #535353;
  border-radius: 14px;
  border: 1px solid #adadad;
  overflow: hidden;
  float: left;
}

.cat label {
  float: left; 
  line-height: 4.0em;
  width: 4.0em; 
  height: 4.0em;
  position: relative;
  z-index: 1;
}

.cat label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.cat label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.cat label input + span{color: #fff;}

.cat input:checked + span {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.cat.first {
  position: relative;
  background: url('Image.png') no-repeat center center;
  background-size: 70%;
}

/* 伪元素混合模式实现透明区域变色 */
.cat.first::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  mix-blend-mode: multiply;
  z-index: -1;
}

/* hover状态 */
.cat.first:hover::before {
  background-color: #424242;
}

/* 选中状态 */
.cat.first:has(input:checked)::before {
  background-color: #424242;
}

原理说明 #

• mix-blend-mode: multiply会让伪元素的背景色与原PNG图片混合，仅在图片的透明/半透明区域显示背景色变化，不会影响图片本身的非透明部分
• :has(input:checked)伪类可以精准选中包含已勾选Checkbox的.cat.first容器，触发其伪元素的背景色修改，从而实现选中态下仅透明区域变色的效果

内容的提问来源于stack exchange，提问作者Liv