过客435 2022-01-13 13:55 采纳率: 20%
浏览 40
已结题

怎么才能呈现这种格式，第一个是我做的，第二个是目的html

img


img


怎么才能做出这样的格式，用这个background-image: url用这个显示出来了就是第一个图片那种怎么把他分开？然后怎么把字体放在上面

  • 写回答

2条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-13 14:16
    关注
    

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
        height: 200px;
        background-color: #dddddd;
        display: flex;
        overflow-x: scroll;
        align-items: center;
      }
      .box-item {
        flex-shrink: 0;
        width: 200px;
        height: 180px;
        margin-left: 10px;
        position: relative;
      }
      .box-item_text {
        width: 60px;
        height: 30px;
        font-size: 22px;
        padding: 2px 10px;
        position: absolute;
        text-align: center;
        border-radius: 50px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background-color: rgba(207, 207, 207, 0.6);
      }
      .box-item_img {
        opacity: 0.9;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box-item">
        <div class="box-item_text">嘿1</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿2</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿3</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿4</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿4</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿4</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿4</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box-item">
        <div class="box-item_text">嘿4</div>
        <img class="box-item_img" src="./15825954118079008.jpg" alt="" />
      </div>
    </div>
  </body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 1月21日
  • 已采纳回答 1月13日
  • 创建了问题 1月13日

悬赏问题

  • ¥20 limma多组间分析最终p值只有一个
  • ¥15 nopCommerce开发问题
  • ¥15 torch.multiprocessing.spawn.ProcessExitedException: process 1 terminated with signal SIGKILL
  • ¥15 QuartusⅡ15.0编译项目后，output_files中的.jdi、.sld、.sof不更新怎么解决
  • ¥15 pycharm输出和导师的一样，但是标红
  • ¥15 想问问富文本拿到的html怎么转成docx的
  • ¥15 我看了您的文章，遇到了个问题。
  • ¥15 GitHubssh虚拟机连接不上
  • ¥15 装完kali之后下载Google输入法 重启电脑后出现以下状况 且退不出去 桌面消失 反复重启没用
  • ¥15 ESP-IDP-BLE配网连接wifi