html - 带有 CSS 覆盖溢出的 CSS 圆形图像

Question

我有一张图片，高度和宽度均为 500 像素。我使用 border-radius 使它成为一个圆形图像。我还有一个纯色背景色，我使用 border-radius 使其也成为一个圆圈。

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

片段:

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

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

正如您从示例中看到的那样，在任何悬停之前，图像底部大约显示一个像素的背景。

Answer 1

我认为这里的问题是 img 默认有 display: inline。 您可以通过在 CSS 中将 img 设置为 display: block 来解决此问题

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