CSS，快速和引導：溢出和餘量錯誤

我使用位置和溢出屬性在圖像上堆疊兩個圓。它工作正常，但我跑過來的左側和右側圖像的圓圈（不上邊和左邊CSS，快速和引導：溢出和餘量錯誤

這裏是CSS

.mainContainer { 
    background-color: #A6A4AA 
} 

.targetImage { 
    margin: 0; 
    width: 100%; 
    height: auto; 
    border: solid medium #2C3756; 
    border-radius: 0 0 8px 8px; 
    background-color: #A6A4AA; 
    position: relative; 
} 

#targetCol { 
    overflow: hidden; 
    position: absolute; 

} 

.impact, .ajustement { 
    position: absolute; 
    background-color: #dc022e; 
    border-radius: 100%; 
    opacity: 0.75; 
    margin: 0; 
    width: 100%; 
    height: auto; 
    border: solid medium #2C3756; 

} 

.ajustement { 
    opacity: 0.5; 
}

的源代碼（EJS +自舉）：該行是mainContainer上的孩子

<div class="row"> <!-- Row : target   --> 
    <div class= "col-xs-12" id="targetCol"> 
    <img id="target" class="targetImage"></img> 
    <div id="ajustement" class="ajustement"></div> 
    <div id="impact" class="impact"></div> 
    </div> 
</div>

怎樣繪製我的圈子到只有圖像，沒有用完邊界？

這裏是我想什麼：

來源

2017-08-05 Guzim Glorantha

您可以共享圖像樣本，要在其中這個圈子？ – kravisingh

謝謝你的回答，@ kravisingh。我沒有在原始文章中添加圖片。 –

你看起來像這樣：

body{ 
 
    margin: 0; 
 
    background-color: #A6A4AA 
 
} 
 
.mainContainer { 
 
    background-color: #A6A4AA; 
 
    margin: 15px auto; 
 
    width: 98%; 
 
} 
 

 
.targetImage { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: auto;  
 
    border-radius: 0 0 8px 8px; 
 
    background: #A6A4AA; 
 
    position: relative; 
 
} 
 

 
#targetCol { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    border: 3px solid #2C3756; 
 
    line-height: 0; 
 
    border-radius: 12px; 
 

 
} 
 

 
.impact, .ajustement { 
 
    position: absolute; 
 
    background-color: #dc022e; 
 
    border-radius: 100%; 
 
    opacity: 0.75; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 3px solid #2C3756; 
 
    left: -45%; 
 
    top: -78px; 
 
    height: calc(100% + 78px); 
 
} 
 
.impact{ 
 
    width: 20px; 
 
    height: 20px; 
 
    border-color: #000; 
 
    left: 10%; 
 
    top: 10%; 
 
} 
 

 
.ajustement { 
 
    opacity: 0.5; 
 
}

<div class="mainContainer"> 
 
<div class="row"> <!-- Row : target   --> 
 
    <div class= "col-xs-12" id="targetCol"> 
 
    <img id="target" class="targetImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/800px-Papageitaucher_Fratercula_arctica.jpg"> 
 
    <div id="ajustement" class="ajustement"></div> 
 
    <div id="impact" class="impact"></div> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-08-07 11:56:55 kravisingh

CSS，快速和引導：溢出和餘量錯誤

回答

相關問題