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://whosebug.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>

我需要一个可以轻松改变内圈颜色的结构and/or图片

例子

<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，背景的大小和位置设置）：

.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;
}

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

注意：橙色方块是图片，周围绿色是背景色，红色圆圈是伪元素的边框，黄色区域是主元素的背景色，蓝色圆圈是主元素的边框。这些都可以是白色或透明的。

评论中的附加问题后添加：

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

.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;
}

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

注：原来的CSS规则保持不变，它们的背景颜色被额外的类覆盖。

在 9 月 18 日 OP 评论中的附加问题后又增加了一个：

是的，您也可以像我在下面所做的那样将其分成两个类（.x1a 和 .x1b）。我只是将类添加到 HTML 标签并将 CSS 从 x1:after 拆分为两条规则，一条用于 .x1a:after 一条用于 .x2a:after

.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;
}

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

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

试试运行这个片段：

$(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++;
    }
  }
});

.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;
}

<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://whosebug.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://whosebug.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://whosebug.com/favicon.ico" alt="">

      </div>
    </div>

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

CSS 带内圆和图像的圆

CSS circle with inner circle and image

html

css

background-image