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

在这里插入图片描述

绘制出基本结构

CSS根据图片颜色设置背景色_第1张图片

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>Documenttitle>
  <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

添加一层将图片设置为背景底图,将背景底图放大,调整透明度
CSS根据图片颜色设置背景色_第2张图片
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根据图片颜色设置背景色_第3张图片

修改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根据图片颜色设置背景色_第4张图片
修改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 */
}

你可能感兴趣的:(Notes,css,html,css3)