CSS根据图片颜色设置背景色

最新推荐文章于 2024-03-30 10:00:00 发布

ZionHH

最新推荐文章于 2024-03-30 10:00:00 发布

阅读量1.1k

点赞数 1

分类专栏： Notes 文章标签： css html css3

本文链接：https://blog.csdn.net/z291493823/article/details/130510363

版权

Notes 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

在这里插入图片描述

绘制出基本结构

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      list-style: none;
    }
    .menu {
      display: flex;
    }
    .menu .menu-item {
      width: 44px;
      height: 44px;
      margin: 0 20px;
      position: relative;
      padding: 10px;
      border-radius: 50%;
      overflow: hidden;
    }
    .menu .menu-item > img {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;
    }
  </style>
</head>
<body>
  <ul class="menu">
    <li class="menu-item">
      <img src="./static/icon-menu_cxs.png" alt="">
    </li>
    <li class="menu-item">
      <img src="./static/icon-menu_cmjf.png" alt="">
    </li>
    <li class="menu-item">
      <img src="./static/icon-menu_snbt.png" alt="">
    </li>
  </ul>
</body>
</html>

方案1

添加一层将图片设置为背景底图，将背景底图放大，调整透明度
在这里插入图片描述
html结构调整

<ul class="menu">
  <li class="menu-item">
    <img src="./static/icon-menu_cxs.png" alt="">
    <!-- 图片背景底图 -->
    <div class="menu-item--bg"></div>
  </li>
  <li class="menu-item">
    <img src="./static/icon-menu_cmjf.png" alt="">
    <div class="menu-item--bg"></div>
  </li>
  <li class="menu-item">
    <img src="./static/icon-menu_snbt.png" alt="">
    <div class="menu-item--bg"></div>
  </li>
</ul>

添加以下css

.menu .menu-item .menu-item--bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 2000%; /* 放大图片 */
  background-position: center;
  opacity: .2; /* 透明度 */
}
.menu .menu-item:nth-child(1) .menu-item--bg {
  background-image: url("./static/icon-menu_cxs.png");
}
.menu .menu-item:nth-child(2) .menu-item--bg {
  background-image: url("./static/icon-menu_cmjf.png");
}
.menu .menu-item:nth-child(3) .menu-item--bg {
  background-image: url("./static/icon-menu_snbt.png");
}

方案2

也是背景底图，通过设置blur属性实现
在这里插入图片描述

修改css

.menu .menu-item .menu-item--bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(30px);
  background-repeat: no-repeat;
  background-size: cover;
}

也可以通过blur设置阴影色
在这里插入图片描述
修改css

.menu .menu-item {
  width: 44px;
  height: 44px;
  margin: 0 20px;
  position: relative;
  padding: 10px;
}
.menu .menu-item .menu-item--bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(22px); /* 适当调整blur 和 scale */
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(0.6); /* 适当调整blur 和 scale */
}