带CSS覆盖溢出的CSS Circle图像

Question

我有一张500 xx高度和宽度的图像。我使用border-radius使其成为圆形图像。我也有一个坚实的背景颜色，我使用border-radius也使它成为一个圆圈。

我正在尝试通过降低图像的不透明度来创建悬停叠加，让背景图像通过。我有它基本上工作，虽然在实际图像的底部显示背景图像大约1px重叠。

段：

＆＃13;

＆＃13;

 .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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

从示例中可以看出，在任何悬停之前，大约有一个背景像素显示在图像的底部。

Answer 1

我认为这里的问题是 img 默认情况下显示：内联。 您可以通过在CSS中将 img 设置为 display：block 来解决此问题

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试添加此css：

.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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;