裁剪的HTML元素

Question

這是現在的樣子，我想刪除這是鬧翻了圖像的藍色條。 我有一個圓形圖像，用img標籤創建。我想在圈子下半部分的圖像上放一個小橫幅。我陷入了從圖像中裁剪溢出的span元素。

.image { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    border: 2px solid #527e35; 
 
    box-shadow: 2px 2px 5px #c8e1b7; 
 
} 
 
.flap { 
 
    position: absolute; 
 
    top: 170px; 
 
    width: 150px; 
 
    margin-left: 0PX; 
 
    padding-left: 20px; 
 
    background: rgba(0, 0, 255, .4); 
 
}

<div name="image" style="float:right; padding-right:50px;margin-bottom:100px;"> 
 
     <span class="flap">keyword </span> 
 
     <img src="content/baby.jpg" alt="baby" class="image"> 
 
<span class="flap">keyword </span> 
 
     <img src="content/baby.jpg" alt="baby" class="image"> 
 
<span class="flap">keyword </span> 
 
     <img src="content/baby.jpg" alt="baby" class="image">  
 
    </div>

藉助於此，我已用薄帶與它的一些文本取得的圓形圖像。我想刪除溢出的地帶。 任何幫助或指導，高度讚賞。

Answer 1

這是因爲您沒有在包裝上使用overflow:hidden，第二，因爲您使用的是name="image"而不是class="image"。另外，包裝需要有position:relative。

.image { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 1px solid #527e35; 
 
    box-shadow: 2px 2px 5px #c8e1b7; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.flap { 
 
    position: absolute; 
 
    top: 170px; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 200px; 
 
    text-align: center; 
 
    background: rgba(0, 0, 255, .8); 
 
    color:white 
 
} 
 

 
img { 
 
    display: block; 
 
}

<div class="image"> 
 
    <span class="flap">Our Man Phil</span> 
 
    <img src="http://www.fillmurray.com/200/200" alt="baby" class="image"> 
 
</div>