Netflix UI克隆中图片上方编号的样式实现问题

嘿，看你在做Netflix UI克隆，卡在图片编号的样式实现上了对吧？我来帮你调整下代码，还原出Netflix那种编号在图片上方的效果~

首先看你当前的代码，.card用了默认横向的flex布局，所以数字和图片是并排显示的，这和Netflix的样式不符。咱们可以通过定位来实现编号悬浮在图片上方的效果，具体调整如下：

调整后的基础实现代码 #

先修改CSS，让编号定位到图片的左上角：

.card{ 
  position: relative; /* 为内部绝对定位元素提供基准 */
  width: 180px; /* 适配Netflix海报的窄宽尺寸 */
  padding: 10px; 
  margin: 10px; 
} 
.card p{ 
  position: absolute; 
  top: 0; 
  left: 0; 
  color: white; 
  -webkit-text-stroke: 2px black; 
  font-size: 80px; /* 缩小字号，避免覆盖过多图片 */
  z-index: 1; /* 确保数字显示在图片上方 */
  margin: 0; /* 清除p标签默认外边距，避免位置偏移 */
  line-height: 1; /* 让数字垂直对齐更精准 */
}
.card img{
  width: 100%; /* 图片占满卡片宽度 */
  border-radius: 4px; /* 加上Netflix海报的圆角样式 */
}

HTML部分可以保持你原来的结构不变：

<section class="movies">
  <div class="card">
    <p>1</p>
    <img src="https://i.sstatic.net/DdvwQOY4.png" alt="movie1">
  </div>
  <!-- 更多电影卡片 -->
</section>

进阶：用CSS计数器自动生成编号 #

如果你的需求是像Netflix Top10那样的连续编号海报行，手动写每个数字太麻烦，用CSS计数器可以自动生成编号，效率更高：

.movies{
  counter-reset: movie-counter; /* 初始化计数器 */
  display: flex; /* 让卡片横向排列，模拟Netflix的海报行 */
  gap: 10px; /* 卡片之间的间距 */
  overflow-x: auto; /* 加入横向滚动，适配多卡片场景 */
  padding-bottom: 10px; /* 给滚动条留出空间 */
}
.card{ 
  position: relative; 
  width: 180px; 
  padding: 10px; 
  margin: 10px; 
  counter-increment: movie-counter; /* 每个卡片让计数器加1 */
} 
/* 用伪元素自动生成编号，不需要额外的p标签 */
.card::before{
  content: counter(movie-counter); 
  position: absolute; 
  top: 0; 
  left: 0; 
  color: white; 
  -webkit-text-stroke: 2px black; 
  font-size: 80px; 
  z-index: 1; 
  margin: 0; 
  line-height: 1; 
}
.card img{
  width: 100%; 
  border-radius: 4px; 
}

对应的HTML可以简化成：

<section class="movies">
  <div class="card">
    <img src="https://i.sstatic.net/DdvwQOY4.png" alt="movie1">
  </div>
  <div class="card">
    <img src="你的海报地址" alt="movie2">
  </div>
  <!-- 继续添加更多卡片即可自动生成编号 -->
</section>

这样调整后，就能实现和Netflix类似的图片上方编号效果啦，你可以根据自己的需求再微调字号、位置或者颜色细节~

内容来源于stack exchange