为img添加线性渐变失效问题求助（附HTML/CSS代码）

嘿，我来帮你排查下问题～ 你的代码里有几个关键问题导致渐变没显示，咱们一步步修复：

1. 先修正CSS选择器的错误 #

你写的选择器是：

.container .row .col-sm-4 .party .party-img img{ ... }

但看你的HTML结构，party-img本身就是<img>元素的类，根本没有嵌套的子级<img>，所以这个选择器完全匹配不到目标元素！正确的选择器应该是：

.container .row .col-sm-4 .party .party-img { ... }

2. 解决渐变被图片覆盖的核心问题 #

直接给<img>加background-image是看不到效果的——因为img的src图片会完全覆盖背景层。这里给你两种实用方案：

方案一：用容器伪元素叠加渐变（推荐） #

利用.party容器的伪元素来铺渐变，既能保留容器的边框样式，又能让渐变覆盖在图片上：

.container .row .col-sm-4 .party {
  border-left: 5px solid black;
  border-bottom: 3px solid black;
  border-top: 1.7px solid black;
  border-right: 1.7px solid black;
  position: relative; /* 让伪元素相对于容器定位 */
  display: inline-block; /* 自适应图片宽度 */
}

/* 添加覆盖在图片上的渐变层 */
.container .row .col-sm-4 .party::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, yellow, blue);
  opacity: 0.6; /* 可自行调整渐变透明度，0是完全透明，1是完全不透明 */
  pointer-events: none; /* 避免渐变层遮挡图片的交互（比如点击） */
}

.container .row .col-sm-4 .party .party-img {
  display: block; /* 去掉图片默认的行内间距 */
  width: 100%; /* 让图片填满容器 */
}

方案二：用混合模式让渐变和图片融合 #

如果想要渐变和图片色彩融合的效果，可以给img加背景渐变，再用mix-blend-mode让两者显示出来：

.container .row .col-sm-4 .party {
  border-left: 5px solid black;
  border-bottom: 3px solid black;
  border-top: 1.7px solid black;
  border-right: 1.7px solid black;
  display: inline-block;
}

.container .row .col-sm-4 .party .party-img {
  background-image: linear-gradient(to right, yellow, blue);
  mix-blend-mode: multiply; /* 混合模式可选，比如screen、overlay都可以试试 */
  display: block;
  width: 100%;
}

3. 删掉不必要的z-index设置 #

你之前给img加了z-index: -1，这会让图片跑到容器的下层，不仅看不到渐变，还可能被边框遮挡，直接删掉这个属性就好～

按照上面的方法修改后，就能同时看到边框和渐变效果啦！

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