Html Css如何从图像中删除黑色矩形背景

Question

我在下面提到图片

下面是我正在使用的html div

<div class="image-cropper">
                  <img [src]="url" alt="..." class="img-thumbnail">
                </div>

以下是css：

.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

如何剪辑黑色背景或使其透明？请建议。

Answer 1

您将背景设置为黑色。

您将部分背景视为黑色的原因是因为图片的边框半径设置为50％：

如果您想完全删除黑色背景：

• 删除背景颜色：黑色;

如果你想（如你所写）想让背景透明：

• 添加背景：rgba（0,0,0,0） - 其中第4个值控制不透明度。