如何调整按钮背景图片透明度且不改变其背景色的透明度？

opacity属性会作用于元素整体，所有子内容、背景色、背景图都会同步变更透明度，无法单独控制背景图，推荐使用伪元素分层方案实现需求，兼容性覆盖所有现代浏览器。

核心实现逻辑 #

• 给按钮添加position: relative，作为伪元素的定位容器，同时设置层级保证按钮文本内容高于背景层
• 移除原按钮上的background-image和全局opacity属性
• 新增::before伪元素独立承载背景图，仅调整该伪元素的透明度，设置其层级在按钮背景色上方、内容下方

修改后的完整代码 #

CSS #

.button {
  border-radius: 4px;
  background-color: #0F69AF;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  font-weight: bold;
  /* 新增定位和层级设置 */
  position: relative;
  z-index: 1;
  /* 删除原有background-image和opacity属性 */
}

/* 新增背景图伪元素 */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../Images/Test.png");
  background-size: cover;
  /* 仅调整背景图透明度，数值可按需修改 */
  opacity: 0.5;
  z-index: -1;
}

.button span {
  padding: 20px;
  color: #fff;
  font: 18px Arial, sans-serif;
  position: relative;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0.5;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/* 补充优化a标签默认样式 */
.button a {
  color: inherit;
  text-decoration: none;
}

HTML #

<div class="column1" style="width:60%">
  <button class="button"><a href="../test" target="_blank"><span>Test1222</span> </a></button>
  <br><button class="button"><a href="../test" target="_blank"><span>TEST123</span> </a></button>
</div>

其他可选方案 #

如果不需要兼容低版本浏览器（Chrome 104+、Firefox 114+），也可以直接使用CSS image()函数直接设置背景图透明度，代码更简洁：

.button {
  /* 其余原有属性不变 */
  background-image: image(url("../Images/Test.png") 0.5);
  background-color: #0F69AF;
  background-size: cover;
}

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