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

YUJIANYUE

于 2023-07-03 04:23:40 发布

阅读量167

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/yujianyue/article/details/131508201

版权

<!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>