css如何把数字放在图片上

由于图片实现有时候并不足以传达完整的信息，因此我们需要在图片上加入数字或文字等附加元素来辅助，CSS 可以实现这一需求。下面我们就来看一下如何在图片上放置数字。首先，我们需要一个含有数字的标签，示例代码如下：

<p class="number">1</p>

接下来，我们需要在 CSS 中定义该标签的样式：

css如何把数字放在图片上

.number {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(255,255,0.8);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

在该样式中，我们定义了标签的定位方式为 absolute，top 和 right 属性分别表示标签距离图片的顶部和右侧的距离，我们也可以使用 left 和 bottom 属性来控制与图片左侧和底部的距离。 background-color 属性定义了标签的背景颜色，border-radius 属性用来实现圆形的效果，width 和 height 属性分别控制标签的宽度和高度，display 属性定义了如何将该元素展示出来，我们使用了 flex 来居中显示数字。最后一个属性 font-size 定义了标签中数字的字体大小。完整的 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .number {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: rgba(255,0.8);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="example.jpg" alt="example">
    <p class="number">1</p>
  </div>
</body>
</html>

上述代码将数字 1 放在图片的右上角，你可以根据需要修改标签的样式和位置，完成需要的效果。

css如何把数字放在图片上

相关推荐