Web实现：网易云音乐个人推荐页_网易云音乐web模版-CSDN博客

本文链接：https://blog.csdn.net/jasmyn518/article/details/122569261

background-position: center;/背景图居中/
background-position: bottom right;/背景图右下角/
background-size: contain;/把背景图片扩大至最大尺寸，使其宽度和高度完全适应内容区域/
background-size: cover;/把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。/

实现效果如下：
个人推荐页
HTML部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>每日推荐</title>
  </head>
  <body>
    <div class="banner">
      <div class="box">
        <div class="head">星期二</div>
        <div class="date">17</div>
        <div class="mask"></div>
      </div>
    </div>
  </body>
</html>

CSS部分：

.banner {
  background-image: url(https://document.youkeda.com/P3-1-HTML-CSS/1.9/music-bg.jpg);
  background-size: cover;
  padding-left: 48px;
  padding-top: 30px;
  box-sizing: border-box;
  width: 715px;
  height: 200px;
}

.box {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 4px;
  overflow: hidden;
}

.head {
  height: 33px;
  line-height: 33px;
  color: #fed9d9;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(to bottom, #d94747, #b9191a);
}

.date {
  background-color: white;
  height: 107px;
  line-height: 107px;
  text-align: center;
  font-size: 94px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #202020;
}

.mask {
  position: absolute;
  top: 33px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.15) 100%
  );
}