html+css实现图片相对定位与字体相对大小 适用于证书

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
  <style>
    .image-container {
      width: 100%;
      position: relative;
      display: inline-block;
    }

    .image-container img {
      display: block;
      width: 100%;
      height: auto;
    }

    .image-caption {
      position: absolute;
      top: 73.05%;
      left: 36.87%;
      transform: translate(-73.05%, -36.87%);
      color: red;
      font-size: 2vw;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="http://zshu.96448.cn/imgs/bg.jpg" alt="Your Image">
    <div class="image-caption">20230703003</div>
  </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/YUJIANYUE/article/details/131508201