帶有CSS疊加層的CSS圓形圖像溢出

Question

我有一個圖像，500像素高度和寬度。我使用border-radius使其成爲一個圓形圖像。我也有一個堅實的背景顏色，我使用border-radius來使它成爲一個圓圈。

我想通過減少圖像的不透明度，讓背景圖像同行通過懸停創建一個覆蓋。我基本上工作，雖然有大約1px的重疊，顯示在實際圖像底部的背景圖像。

段：

.image-wrapper { 
 
\t  width: 100%; 
 
\t  height: 100%; 
 
\t  background-color: #000; 
 
\t  border-radius: 50%; 
 
\t  margin: 0; 
 
     padding: 0; 
 
    } 
 
    img { 
 
\t  width: 100%; 
 
\t  height: 100%; 
 
\t  margin: 0; 
 
     padding: 0; 
 
    }

<div class="image-wrapper"> 
 
\t \t <img class="testing red" src="img.jpg"> 
 
\t </div>

正如從例子中看到有示出在圖像的底部的背景的約一個像素前的任何徘徊。

Answer 1

我覺得這裏的問題是，img有顯示：默認在線。

.image-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    border-radius: 50%; 
 
}

<div class="image-wrapper"> 
 
    <img class="testing red" src="http://lorempixel.com/400/400"> 
 
</div>

Answer 2

嘗試加入這個CSS塊在你的CSS： 你可以通過你的IMG設置爲顯示修復

.image-wrapper{ 
    width:128px; 
    margin: 10px; 
    border:10px solid red; 
    border-radius: 500px; 
    -webkit-border-radius: 500px; 
    -moz-border-radius: 500px; 
} 

下面是示例例子爲你提問，希望這會對你有所幫助。

http://jsfiddle.net/z3rLa/1/

Answer 3

.image-overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border:2px solid #000; 
 
} 
 
.image-overlay:hover { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    opacity:0.5; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    border-radius: 50%; 
 
}

<div class="image-overlay"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSODZIzJ1LLVMxlyd4RKB8TmvAeufTRGolSlX64IagMNtWvo4ij"> 
 
</div>