HTML + CSS 连载 | 54 - 网易云音乐 ITEM（中）

本文链接：https://blog.csdn.net/JingnanJia/article/details/136438295

html+css.jpeg

一、实现网易云首页 item 图片上的图标

上篇文章中我们已经实现了封面的基本样式：

与官网中的样式相比还缺少播放量和播放按钮等信息：

第 1 步：设置播放量

在 div.top 中添加一个 div.info 来显示播放量信息，具体代码如下所示：

<div class="item">
  <div class="top">
    <img src="https://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140" alt="">
    <!-- 封面背景 -->
    <a class="cover"></a>
    <div class="info">2928万</div>
  </div>
  <div class="bottom">这些充满『强烈画面感』的音乐</div>
</div>

刷新浏览器，效果如下：

播放量信息是覆盖在封面图上的，因为 div.top 已经是相对定位元素了，因此通过添加绝对定位并设置偏移量，将播放信息放在左下角，具体代码如下：

.item .top .info {
  position: absolute;
  bottom: 0;
  left: 0;
}

刷新浏览器，具体效果如下：

原样式中播放量信息还有一个半透明灰色的背景：

添加同样的背景以及背景图片位置，需要注意的是 background-position 一定要放在 background 属性后面，否则设置无效。

.item .top .info {
  p