HTML CSS服务介绍页卡片悬停渐变背景显示异常求助

效果对比 #

• 当前实际异常效果：
• 预期实现效果：

存在的问题 #

• rgba参数语法错误：渐变颜色的透明度参数错误使用逗号作为分隔符，rgba(255, 28, 8, 0, 7)属于无效写法，浏览器无法识别该渐变配置，导致悬停背景不生效
• 选择器未闭合：第6个卡片的hover样式缺少闭合花括号，导致后续的响应式媒体查询规则被包裹在该选择器内部，全局响应式布局失效
• 背景路径配置错误：背景图使用本地file://绝对路径，且部分路径指向HTML文件而非图片资源，无法正常加载背景图
• 缺少过渡动画：没有配置属性过渡，悬停效果切换生硬

修复方法 #

1. 把所有渐变里的rgba参数的透明度分隔符从逗号改成小数点，例如rgba(255, 28, 8, 0, 7)修改为rgba(255, 28, 8, 0.7)
2. 给第6个卡片的hover样式补充闭合花括号，让媒体查询规则全局生效
3. 将背景图路径替换为项目内的相对路径，例如./my-color.png，如果暂时没有对应背景图可以先删除url部分，仅保留渐变效果
4. 给.card选择器添加过渡属性，优化悬停体验

修复后完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  font-family: 'raleway';
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fafafa;
}

.wrapper h1 {
  font-size: 3em;
  margin: 25px 0;
  text-align: center;
  font-weight: 500;
}

.content-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1000px;
  margin-top: 30px;
}

.card {
  min-height: 220px;
  width: 320px;
  padding: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  margin: 10px 4px;
  box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.2);
  /* 新增过渡效果 */
  transition: all 0.3s ease;
}

.card i {
  margin: 20px;
  color: #ff5724;
  transition: all 0.3s ease;
}

.card h2 {
  margin-bottom: 12px;
  font-weight: 400;
  text-align: center;
  transition: all 0.3s ease;
}

.card p {
  color: #6c757d;
  text-align: center;
  transition: all 0.3s ease;
}

.card:hover i,
.card:hover p {
  color: #fff
}

.card:hover h2 {
  font-weight: 500;
  color: #f2f2f2;
}

.card:nth-child(1):hover {
  background: linear-gradient(45deg, rgba(255, 28, 8, 0.7) 0%, rgba(255, 0, 82, 0.7) 100%), url('./替换为你的背景图路径.png');
  background-size: cover;
}

.card:nth-child(2):hover {
  background: linear-gradient(45deg, rgba(255, 28, 8, 0.7) 0%, rgba(255, 0, 82, 0.7) 100%), url('./替换为你的背景图路径.png');
  background-size: cover;
}

.card:nth-child(3):hover {
  background: linear-gradient(45deg, rgba(255, 28, 8, 0.7) 0%, rgba(255, 0, 82, 0.7) 100%), url('./替换为你的背景图路径.png');
  background-size: cover;
}

.card:nth-child(4):hover {
  background: linear-gradient(45deg, rgba(255, 28, 8, 0.7) 0%, rgba(255, 0, 82, 0.7) 100%), url('./替换为你的背景图路径.png');
  background-size: cover;
}

.card:nth-child(5):hover {
  background: linear-gradient(45deg, rgba(255, 28, 8, 0.7) 0%, rgba(255, 0, 82, 0.7) 100%), url('./替换为你的背景图路径.png');
  background-size: cover;
}

.card:nth-child(6):hover {
  background: linear-gradient(45deg, rgba(255, 28, 8, 0.7) 0%, rgba(255, 0, 82, 0.7) 100%), url('./my_color.png');
  background-size: cover;
}
/***Responsive****/
@media (max-width: 991px) {
  .wrapper {
    padding:25px;
  }
  .wrapper h1 {
    font-size: 2.5em;
    font-weight: 600;
  }
  .content-box {
    flex-direction: column;
    width: 100%;
  }
  .card {
    min-width: 300px;
    margin: 10px auto;
  }
}

HTML代码无错误无需修改，替换CSS内容即可实现预期效果。

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