无法移除按钮的background: linear-gradient，寻求hover样式解决方案

架构老林

2026-8-23

问题解决：按钮被渐变遮罩覆盖且自带渐变的问题

问题说明

无法移除按钮上的background: linear-gradient样式，同时希望鼠标悬停时按钮位于渐变遮罩上方，且按钮自身无渐变效果。

解决方案

核心问题有两个：一是按钮被.image::after的渐变遮罩层覆盖，二是按钮继承了btn-info类的渐变背景。只需两步修复：

给按钮设置高于渐变遮罩的z-index，确保它显示在遮罩上方
强制覆盖btn-info类的背景样式，清除自带渐变

修改后的完整代码

HTML代码

<div class="image">
   <img style="object-fit: cover; width:350px; height:250px;" src="https://st.depositphotos.com/1224365/2498/i/950/depositphotos_24980235-stock-photo-portrait-of-a-normal-man.jpg" alt="">
   <button type="button" class="mybuttonoverlap btn btn-info">Read More</button>
   <div class="qualquer">MISSÃO E OBJETIVOS</div>
</div>

CSS代码

.image {
  position: relative;
  z-index:1;
  display: flex;
  justify-content: center;
}

.image::after{
  content:"";
  position:absolute;
  background: linear-gradient(0deg, rgba(39,38,42,1) 0%, rgba(255,255,255,0) 60%);
  z-index:2;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

.image:hover .qualquer {                          
  top: 50%;
}

.image:hover .mybuttonoverlap{ 
  display:block;
}

.mybuttonoverlap{
  position: absolute;
  color: #000000;
  background-color: #ffffff !important; /* 强制覆盖btn-info的渐变背景 */
  border-color: #ffffff;
  border-radius: 30px;
  top: 190px;
  display: none;
  z-index: 3; /* 高于渐变遮罩的z-index:2，确保按钮在上方 */
}

.qualquer {
  position: absolute;
  width: 325px;
  top: 87%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #ffffff;
  text-align: center;
}