CSS圓與內圈和圖像

Question

我是新來的CSS所以請裸露與我。我試圖實現以下目標：

• 後臺圓圈，裏面有一塊小的彩色圓圈，必須爲軸心的圓內
• 小居中的圖像
• 所有這些項目的需求被放置在一個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，爲背景的大小和位置設置）：

.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添加了兩個類，一個影響主元素中的背景，另一個影響僞元素的背景顏色。在後一種情況下，你必須確保使用background-color屬性，而不是background的CSS規則 - 否則的背景圖像將消失：

.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評論額外問題

---

ONE MORE此外：

是的，你也可以分開，在兩個班，因爲我下面（.x1a和.x1b）做到了。我只是增加兩班到HTML標籤和分裂從x1:after的CSS分成兩個規則，一個用於.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://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>