html - 如何使3个圆圈以不同的不透明度在另一个圈子内

Question

伙计们，我必须在另一个圆圈内做 3 个圆圈。这是我设法得到的结果(我使用的是 bootstrap 4)。正如您在下面看到的，我得到了 3 个省略号，可能是因为我必须对 3 个圆圈使用绝对位置和相对位置，因为它们具有相同的颜色，但不透明度不同。如果可能的话，我希望它能够响应。

div.container {
  background-image: url("../../../assets/sfondi/iStock-612391600_1500px.jpg");
  background-size: cover;
  width: 100%;
  height: auto;
  margin: auto;
  padding: 15px;
}

div.outer-shadow {
  border-radius: 50%;
  background-color: #edfbfb;
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.3;
}

div.inner-shadow {
  border-radius: 50%;
  background-color: #edfbfb;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 30px;
  opacity: 0.6;
}

div.ring {
  background-color: #edfbfb;
  border-radius: 50%;
  height: calc(100% - 60px);
  width: calc(100% - 60px);
  position: relative;
  top: 30px;
  left: 45px;
  padding: 15%;
}

div.ring div.row div.col-md-6 {
  display: inline-block;
  margin: auto;
}

img {
  width: 100%;
  height: auto;
  min-width: 30%;
}

.font {
  font-family: "Bree Rg", sans-serif;
}

span {
  color: #0c49a2;
}

span.text-center {
  padding: 0 15px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="container text-center">
    <div class="row">
      <div class="col-md-6">
        <div class="outer-shadow"></div>
        <div class="inner-shadow"></div>
        <div class="ring">
          <div class="row">
            <span class="font-weight-bold text-center">SOME TEXT, SOME TEXT, SOME TEXT, SOME TEXT</span>
          </div>
          <div class="row">
            <div class="col-md-6">
              <img src="../../../assets/Risorsa%201.png" alt="">
            </div>
            <div class="col-md-6">
              <span class="font font-weight-bold">Other text, Other text, Other text</span>
              <a href="javascript: void(0)">
                <img src="../../../assets/store/Risorsa%206.png" alt="">
              </a>
              <a href="javascript: void(0)">
                <img src="../../../assets/store/Risorsa%205.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的 html:

<div class="container-fluid">
  <div class="container text-center">
    <div class="row">
      <div class="col-md-6">
        <div class="outer-shadow"></div>
        <div class="inner-shadow"></div>
        <div class="ring">
          <div class="row">
            <span class="font-weight-bold text-center">INIZIA UNA NUOVA AVVENTURA IN BUONA COMPAGNIA</span>
          </div>
          <div class="row">
            <div class="col-md-6">
              <img src="../../../assets/Risorsa%201.png" alt="">
            </div>
            <div class="col-md-6">
              <span class="font font-weight-bold">Scarica l'app, registrati e inizia i sentieri</span>
              <a href="javascript: void(0)">
                <img src="../../../assets/store/Risorsa%206.png" alt="">
              </a>
              <a href="javascript: void(0)">
                <img src="../../../assets/store/Risorsa%205.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的 CSS:

div.container{
  background-image: url("../../../assets/sfondi/iStock-612391600_1500px.jpg");
  background-size: cover;
  width: 100%;
  height: auto;
  margin: auto;
  padding: 15px;
}

div.outer-shadow{
  border-radius: 50%;
  background-color: #edfbfb;
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.3;
}

div.inner-shadow{
  border-radius: 50%;
  background-color: #edfbfb;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 30px;
  opacity: 0.6;
}

div.ring{
  background-color: #edfbfb;
  border-radius: 50%;
  height: calc(100% - 60px);
  width: calc(100% - 60px);
  position: relative;
  top: 30px;
  left: 45px;
  padding: 15%;
}

div.ring div.row div.col-md-6{
  display: inline-block;
  margin: auto;
}

img{
  width: 100%;
  height: auto;
  min-width: 30%;
}

.font{
  font-family: "Bree Rg", sans-serif;
}

span{
  color: #0c49a2;
}

span.text-center{
  padding: 0 15px;
}

我该如何解决这个问题？或者是否有其他方法可以完成我正在尝试的事情？

Answer 1

您可以使用多个框阴影来插入褪色的圆圈

body {
  background-color: teal !important;
  padding: 100px;
}

.circle {
  position: relative;
  /*just for centering inner content*/
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  /**********************************/
  width: 350px;
  height: 350px;
  background: white;
  border-radius: 50%;
  /*u can add as many box shadows u want*/
  box-shadow: 0 0 0px 13px rgba(255, 255, 255, 0.50), 0 0 0px 25px rgba(255, 255, 255, 0.50);
}

.inner {
  position: relative;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="circle">
  <div class="inner row">
    <div class="col-12 text-center">Text Text Text</div>
    <div class="col-6 text-center">
      <div><img src="http://via.placeholder.com/80x150"></div>
    </div>
    <div class="col-6 d-flex flex-column justify-content-center text-center">
      <div>Text Here</div>
      <div><img src="http://via.placeholder.com/80x30"></div>
      <div><img src="http://via.placeholder.com/80x30"></div>
    </div>
  </div>
  <div>