带有 CSS 覆盖溢出的 CSS Circle 图像答案

【问题标题】：CSS Circle image with CSS overlay overflow带有 CSS 覆盖溢出的 CSS Circle 图像
【发布时间】：2017-06-29 15:36:33
【问题描述】：

我有一张图片，高度和宽度为 500 像素。我使用边界半径使其成为圆形图像。我还有一个纯色的背景颜色，我也使用了边框半径来使它成为一个圆圈。

我正在尝试通过降低图像的不透明度来创建悬停覆盖，让背景图像通过。我基本上可以正常工作，尽管在实际图像底部显示背景图像大约有 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>

从示例中您可以看到，在任何悬停之前，图像底部都会显示大约 1 个像素的背景。

【问题讨论】：

我在悬停不透明时图像变暗...试试我的答案，这对你有帮助吗

标签： html css

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：