删除白色模态图像背景答案

【问题标题】：Remove white modal image background删除白色模态图像背景
【发布时间】：2022-01-27 22:10:51
【问题描述】：

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

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

【问题讨论】：

你的意思是shite背景是图像的一部分吗？您需要裁剪图像，代码无法检测到白色背景并且不显示它（从技术上讲，您可以，但与裁剪图像相比，这是一个巨大的挑战）
@StudioTime 否，白色背景不是图像的一部分，白色背景是自动创建的，它取决于图像的宽度和高度，白色背景的大小。如果图像覆盖了白色背景，您将看不到它。
你能添加一个工作沙箱吗？
@ShivamSharma 从未听说过沙盒。它能做什么？
@Rahm6 Sandbox 是您的代码的minimal reproducible example，您也可以使用 StackOverflow 的 "Code Snippet" 意见。

标签： html jquery css bootstrap-modal

【解决方案1】：

你可以设置一个透明的背景颜色。

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

【讨论】：

谢谢！我只需要添加 !important 就可以了。它是如何继承背景颜色的？
只需替换原始css中的background-color: #fff，就不需要!important。
已经这样做了，也没有用。我猜它是从某个地方继承而来的。
你说得对，我刚刚检查了 codepen。这些是 jquery 图像库样式。您可以使用 CSS 特性并添加一个额外的类 custom-modal-content 并基于此选择器 .custom-modal-content { background-color: transparent } 定义样式。
好的，我现在明白了，非常感谢您的努力。

【解决方案2】：

试试这个：

.modal-backdrop {
   background: none;
}

【讨论】：

不幸的是，这不起作用，因为模态不是真正的引导程序。
一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。