css模糊背景

最新推荐文章于 2024-08-12 16:19:20 发布

CHUAIXYu

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量99

点赞数

文章标签： css 前端 html vue.js 前端框架

本文链接：https://blog.csdn.net/chuaixingyu/article/details/128622720

版权

今天写项目遇到了模糊背景，查询网上资料，学习到了filter:blur()样式。

html部分

    <!--    专辑封面-->
    <div class="albumCover">
      <div>
        <img src="../assets/picture.jpg" alt="">
        <ul>
          <li class="albumTitle">制造浪漫|动人此刻连接你我</li>
          <li>
            <div class="portrait"></div>
            <span class="anthor">买菜不用券</span>
          </li>
        </ul>
      </div>
    </div>

css部分

//专题封面
.albumCover {
  height: 220px;
  background: url("../assets/picture.jpg") no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;
  overflow: hidden;

  &:after {
    content: "";
    width: 100%;
    height: 220px;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(20px);
    z-index: 1;
  }

  img {
    z-index: 2;
    margin: 40px 20px;
    position: absolute;
    width: 140px;
  }
}

//专辑封面中的标题
.albumTitle {
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 40px;
  left: 180px;
  z-index: 2;
}

//头像
.portrait {
  width: 40px;
  height: 40px;
  background-color: #f1f1f1;
  border-radius: 50%;
  position: absolute;
  bottom: 80px;
  left: 180px;
  z-index: 2;
}

//作者
.anthor {
  color: #cdc9cb;
  position: absolute;
  bottom: 90px;
  left: 227px;
  z-index: 2;
}