如何使用HTML/CSS实现MSN风格新闻卡片效果

你现有代码效果差的核心问题是错用mix-blend-mode直接混合图片和背景，直接破坏了图片本身的色彩和清晰度；另外渐变挂在卡片背景层，和图片、文字的层级关系不对，导致融合生硬、质感廉价。

MSN原生卡片的实现逻辑非常简单，就是三层独立结构：

• 最底层：完全无修改的清晰原图，不添加任何混合、滤镜效果
• 中间层：只覆盖图片底部的渐变遮罩，从透明平滑过渡到卡片底色
• 最上层：文字内容，层级最高保证可读性
  不需要复杂的特效配置，就能做出通透自然、和原生效果一致的卡片。

核心优化点 #

• 移除图片上的mix-blend-mode属性，保证图片100%清晰显示，无色彩偏差
• 新增独立的绝对定位渐变遮罩层，仅覆盖图片区域，不影响卡片其他部分
• 文字内容放在最高层级，通过负边距自然延伸到渐变遮罩区域
• 微调阴影、圆角、hover动效参数，匹配MSN原生的柔和质感
• 用CSS变量控制卡片底色，可快速切换不同主题色的卡片样式

完整实现代码 #

HTML结构 #

<ul class="card-wrapper">
  <li class="card">
    <img src='https://images.unsplash.com/photo-1611916656173-875e4277bea6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400' alt=''>
    <div class="card-overlay"></div>
    <div class="card-content">
      <h3><a href="">图片上方叠加透明渐变遮罩</a></h3>
      <p>和底部卡片底色平滑自然融合，无生硬边界</p>
    </div>
  </li>
  <li class="card">
    <img src='https://images.unsplash.com/photo-1611083360739-bdad6e0eb1fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400' alt=''>
    <div class="card-overlay"></div>
    <div class="card-content">
      <h3><a href="">文字可自然延伸到图片底部区域</a></h3>
      <p>渐变区域外的图片保持完全清晰的显示效果</p>
    </div>
  </li>
  <li class="card">
    <img src='https://images.unsplash.com/photo-1613230485186-2e7e0fca1253?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400' alt=''>
    <div class="card-overlay"></div>
    <div class="card-content">
      <h3><a href="">最终效果匹配MSN原生新闻卡片</a></h3>
      <p>图片通透、渐变自然、文字清晰，质感统一</p>
    </div>
  </li>
</ul>

CSS样式（可直接转SCSS使用） #

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1b1b1b;
  background-color: #f3f3f3;
}

.card-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  gap: 1.5rem;
  max-width: 120ch;
  width: 100%;
}

.card {
  --card-footer-bg: #ffffff;
  position: relative;
  background-color: var(--card-footer-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover态微交互，和MSN效果一致 */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* 核心渐变遮罩层 */
.card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,0.2) 65%,
    var(--card-footer-bg) 100%
  );
  pointer-events: none;
}

.card-content {
  position: relative;
  padding: 0 1rem 1.2rem;
  margin-top: -4rem;
  z-index: 2;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
}

.card h3 a {
  color: #1b1b1b;
  text-decoration: none;
}

.card h3 a:hover {
  text-decoration: underline;
}

.card p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
}

自定义调整说明 #

• 需要深色/彩色卡片时，仅需修改--card-footer-bg变量为对应色值，同时调整文字颜色适配即可，渐变会自动和底色平滑融合
• 调整linear-gradient中的百分比参数，可以控制渐变覆盖高度、过渡柔和度
• 修改.card img的height属性可调整图片区域高度，同步修改.card-overlay的高度值即可
• 不同分类的卡片单独设置--card-footer-bg主题色，就能快速实现MSN那种多色卡片的视觉效果

关键注意点：不要给图片本身加任何混合模式、滤镜效果，这是保证图片通透质感的核心。所有渐变、色彩效果都通过独立的上层遮罩实现，和图片本身完全解耦。

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