带有内圈和图像的CSS圈

Question

我试图实现以下目标：

• 背景圆圈内部有一个较小的彩色圆圈，必须居中
• 两个圆圈内的小中心图像
• 所有这些项目都需要放在一个div
中

我尝试使用最少量的代码执行此操作。我想尽可能避免重复。我相信所有这一切都可以通过选择器之前和之后实现，但我不确定如何完成这项工作

这是我到目前为止所拥有的：

CSS：

    .grid-container {
        display: grid;
        grid: 100px / 100px;
    }

    .circle {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: #e4e4e7;
    }

     .circle:before {
        content: "";
        border-radius: 50%;
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        background-color: blue;
        display: block;
        position: relative; 
    }

    .image-one:before {
        content: url("https://stackoverflow.com/favicon.ico");
    }

    .circle-01 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

HTML：

<div class="grid-container">
    <div class="circle-01 circle image-one"></div>
</div>

我需要一种结构，我可以轻松地改变内圈和/或图像的颜色

实施例

<div class="grid-container">
    <div class="circle-01 circle image-one yellow"></div>
    <div class="circle-01 circle image-two blue"></div>
    <div class="circle-01 circle image-three green"></div>
</div>

Answer 1

您可以使用这样的伪元素，将伪元素放在主元素的顶部并使用边框和背景图像。如果它没有填充整个伪元素，你甚至可以在图像后面使用背景颜色（注意no-repeat，背景的大小和位置设置）：

＆＃13;

＆＃13;

.x1 {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  border: 10px solid #22f;
  margin: 30px;
  background: yellow;
}

.x1:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 6px solid #f22;
  background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
  background-size: 100px 100px;
}

＆＃13;

<div class="x1"></div>

＆＃13;

＆＃13;

＆＃13;

注意：橙色正方形是图像，其周围的绿色是背景颜色，红色圆圈是伪元素的边框，黄色区域是主要元素的背景颜色，蓝色圆圈是主要元素的边界。这些中的每一个都可以是白色或透明的。

在评论中的其他问题之后添加：

您还可以通过添加单独的类来更改背景颜色。在下面的代码片段中，我向div添加了两个类，一个影响主元素中的背景，另一个影响伪元素的背景颜色。在后一种情况下，您必须确保在CSS规则中使用background-color属性，而不是background - 否则背景图像将消失：

＆＃13;

＆＃13;

.x1 {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  border: 10px solid #22f;
  margin: 30px;
  background: yellow;
}

.x1:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 6px solid #f22;
  background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
  background-size: 100px 100px;
}
.aqua-outer-bg {
background: aqua;
}
.pink-inner-bg:after {
background-color: pink;
}

＆＃13;

<div class="x1 aqua-outer-bg pink-inner-bg"></div>

＆＃13;

＆＃13;

＆＃13;

注意：原始CSS规则保持不变，其背景颜色被其他类覆盖。

9月18日OP发表评论中的其他问题之后还有一个额外的补充：

是的，您也可以将其分为两个类，如下所示（.x1a和.x1b）。我只是将这两个类添加到HTML标记中，然后将CSS从x1:after拆分为两个规则，一个用于.x1a:after，另一个用于.x2a:after

＆＃13;

＆＃13;

.x1a {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  border: 10px solid #22f;
  margin: 30px;
  background: yellow;
}

.x1a:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
  background-size: 100px 100px;
}
.x1b:after {
  border-radius: 50%;
  border: 6px solid #f22;
}
.aqua-outer-bg {
background: aqua;
}
.pink-inner-bg:after {
background-color: pink;
}

＆＃13;

<div class="x1a x1b aqua-outer-bg pink-inner-bg"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

胡言乱语

    div {
      border-radius: 50%
    }

    #a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 64px;
      width: 64px;
      border: 2px solid green;
    }

    img {
      align-self: auto;
      border: 2px solid blue;
      border-radius: 50%;
      padding:5%;
    }

    <div id="a">
      <img src="https://rack.pub/media/janus.png" height="48">
    </div>

Answer 3

尝试运行此代码段：

＆＃13;

＆＃13;

$(document).ready(function() {
  var sourceIndex = 1;
  var colorIndex = 1;
  var colors = [
    "rgb(0, 132, 203)",
    "rgb(255, 192, 203)",
    "rgb(50, 192, 103)",
    "rgb(255, 165, 0)"
  ];
  var sources = [
    "https://www.linkedin.com/favicon.ico",
    "https://www.google.com/favicon.ico",
    "http://jsfiddle.net/favicon.ico",
    "https://getbootstrap.com/favicon.ico",
    "https://www.facebook.com/favicon.ico"
  ];
  $("button").click(function() {
    changeStuff($(this).hasClass("changeImage") ? sources : colors, $(this));

    function changeStuff(list, selector) {
      counter(list, selector);
      if (list == sources) {
        selector
          .prev()
          .prev(".outer-circle")
          .find(".inner-circle")
          .find("img")
          .attr("src", list[sourceIndex]);
      } else {
        if (
          selector
          .prev(".outer-circle")
          .find(".inner-circle")
          .css("background-color") == colors[colorIndex]
        ) {
          selector
            .prev(".outer-circle")
            .find(".inner-circle")
            .css("background-color", "tan");
        } else {
          selector
            .prev(".outer-circle")
            .find(".inner-circle")
            .css("background-color", colors[colorIndex]);
        }
      }
    }
  });

  function counter(list, selector) {
    if (list == sources) {
      sourceIndex == list.length - 1 ? (sourceIndex = 0) : sourceIndex++;
    } else {
      colorIndex == list.length - 1 ? (colorIndex = 0) : colorIndex++;
    }
  }
});

＆＃13;

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.box {
  display: flex;
}

.inner-circle {
  border-radius: 50%;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box:first-child .inner-circle {
  background-color: blue;
}

.box:nth-child(2) .inner-circle {
  background-color: black;
}

.box:nth-child(3) .inner-circle {
  background-color: maroon;
}

.outer-circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: #e4e4e7;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="box">
    <div class="outer-circle">
      <div class="inner-circle">
        <img src="https://stackoverflow.com/favicon.ico" alt="">

      </div>
    </div>

    <button class='changeColor'>Change Color</button>
    <button class='changeImage'>Change Image</button>
  </div>

  <div class="box">
    <div class="outer-circle">
      <div class="inner-circle">
        <img src="https://stackoverflow.com/favicon.ico" alt="">

      </div>
    </div>

    <button class='changeColor'>Change Color</button>
    <button class='changeImage'>Change Image</button>
  </div>

  <div class="box">
    <div class="outer-circle">
      <div class="inner-circle">
        <img src="https://stackoverflow.com/favicon.ico" alt="">

      </div>
    </div>

    <button class='changeColor'>Change Color</button>
    <button class='changeImage'>Change Image</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;