鼠标悬停父元素时修改子元素渐变且保留背景图的CSS实现

你的问题核心是：直接重写background-image会覆盖原有的「渐变+图片」组合，导致图片消失，同时你不想重复图片URL。这完全可以实现，下面给你两种可行方案，先顺便修正你代码里的几个小错误：

原代码的错误点 #

• CSS里.b的background-image：rgba(6,89,168,)多了个多余逗号，url()后的!important语法错误（不需要加在这里，且实际也没必要用!important）
• HTML标签闭合错误：<div class="b">的闭合标签写成了</div class="a">，外层的闭合也写错了，正确的HTML结构应该是嵌套正确的闭合标签。

方案一：使用CSS自定义属性（变量）分离渐变 #

把渐变定义成CSS变量，hover时只更新变量值，background-image会自动组合新渐变和原有图片，完全不用重复URL：

<html>
<head>
<style>
.b{
  /* 定义渐变变量 */
  --bg-gradient: linear-gradient(90deg,rgba(255,255,255,1) 8%,rgba(6,89,168,1) 99%);
  background-image: var(--bg-gradient), url(https://path/to/image.jpg);
  /* 记得给元素设置宽高，否则看不到效果 */
  width: 500px;
  height: 300px;
}
.a:hover .b{
  /* 仅修改渐变变量即可 */
  --bg-gradient: linear-gradient(90deg,rgba(0,0,0,1) 8%,rgba(30,30,30,0.5) 99%);
} 
</style>
</head>
<body>
<div class="a">
  <div class="b"></div>
</div>
</body>
</html>

方案二：用伪元素承载渐变层 #

把背景图片直接放在.b上，渐变层用伪元素实现，hover时只修改伪元素的渐变样式，彻底分离图片和渐变：

<html>
<head>
<style>
.b{
  background-image: url(https://path/to/image.jpg);
  position: relative;
  width: 500px;
  height: 300px;
}
/* 伪元素作为渐变叠加层 */
.b::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,rgba(255,255,255,1) 8%,rgba(6,89,168,1) 99%);
}
.a:hover .b::before{
  /* hover时仅修改伪元素的渐变 */
  background: linear-gradient(90deg,rgba(0,0,0,1) 8%,rgba(30,30,30,0.5) 99%);
}
</style>
</head>
<body>
<div class="a">
  <div class="b"></div>
</div>
</body>
</html>

这两种方案都能满足你的需求，不用重复图片URL，hover时只修改渐变样式，背景图片保持不变。

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