时间戳

首页 > 解决方案 > 在图片上添加播放图标

css - 在图片上添加播放图标

问题描述

如何从 fontawesome 添加这个图标并将其放在这张图片上？

我希望它在图片的中心对齐。

<i class="fas fa-play-circle"></i>


<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div class="d-flex border-bottom  mb-1 mt-3">
    <!-- Media -->
    <ul class="list-unstyled video-list-thumbs row">
      <li class="col-lg-3 col-sm-4 col-xs-6">
        <a href="#">
          <img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
        </a>
      </li>
    </ul>
    <!-- Content -->
    <div class="ml-2">
      <h5 class="mb-0 ml-2">
        Lesson 1 : Lorem ipsum dolor sit.

      </h5>
      <span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
      <p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>

    </div>
  </div>
</body>

</html>

标签： css

解决方案

问题已解决，响应式设计现在已正确实现。您只需使用以下代码更新您的 CSS

.img-box{
  position: relative;
  min-width: 100%;
  height: 100%;
  display: block;
}

.icon-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  min-height: 100%;
}
.icon-box i{
  font-size: 29px;
  color: #fff;
}

@media(max-width: 767px){
  .main-box {
    flex-direction: column;
    align-items: center;
  }
}

并使用以下内容更新您的 HTML

<div class="d-flex border-bottom  mb-1 mt-3 main-box">
  <!-- Media -->
  <ul class="list-unstyled video-list-thumbs row">
    <li>
      <a href="#" class="img-box">
        <div class="icon-box">
          <i class="fas fa-play-circle"></i>
        </div>
        <img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
      </a>
    </li>
  </ul>
  <!-- Content -->
  <div class="ml-2">
    <h5 class="mb-0 ml-2">
      Lesson 1 : Lorem ipsum dolor sit.

    </h5>
    <span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
    <p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>

  </div>
</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Abhijeet John Kujur</a>.
</div>

推荐阅读