删除白色模态图像背景

Question

我有一个以模式显示的图像。不幸的是，这张图片有白色背景。只应显示图像，白色不应可见。

HTML:

<div id="myModal" class="modal"><div id="close">X</div><img id="modalimg" class="modal-content" src=""></div>

CSS:

.modal-content {
  max-height: 850px;
  max-width: 1700px;
  width: auto;
  height: auto;
  margin:0 auto;
  margin-top: 20px;
  object-fit: scale-down;
  background-color: #fff;
}
#myModal{
  height: 100%;
  width:100%;
  position:absolute;
  background-color: rgba(0, 0, 0, .5);
  display: none;
  z-index: 20;
}

JS（如果需要）：

$('.gallery-img').click(function(){
    $('#myModal').css('display', 'block');
    var src = $(this).attr('src');
    $('.modal-content').attr('src', src);
    $('.modal-content').data('src', src);
});
$('#close').click(function(){
    $('#myModal').css('display', 'none');
});

编辑：第二张对比图：

编辑 2：码笔：Link

Answer 1

试试这个：

.modal-backdrop {
   background: none;
}

Answer 2

您可以设置透明背景色。

.modal-content {
  background-color: transparent;
}

删除白色模态图像背景

Remove white modal image background

html

css

jquery

bootstrap-modal