平滑黑色图像和黑色背景之间的过渡

Question

使用以下 CSS：

#divPic {
  height: 32pc; 
  background-image:  url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-color: #000000;
  opacity: 1;

}

...我将图像 dice.jpg 设置为 id 为 divPic 的 div 的背景图像。

结果是这样的：

问题是图片没有覆盖整个画面范围。

如果我将背景颜色更改为蓝色，您可以看到哪个部分被图像覆盖，哪个部分没有：

我使用的是黑色背景色（#000000），所以它看起来或多或少还可以，但让我烦恼的是，如果你仔细观察，你会看到图像的右边缘......即背景 -颜色（#000000）和图像的颜色（一些略有不同的黑色）不完全匹配。我尝试过使用不同类型的黑色（例如 #000008 而不是 #000000 等），但您仍然可以看到图像结束和背景颜色开始的边缘。

因此，我的问题是：是否有某种方法可以平滑图像和背景颜色之间的过渡，以便您不再看到边缘？

******************************************UPADTE********* ************************

这里有一些上下文：

我用的是bootstrap，图片的frame是bootstrap-column：

       <div id="picContainer" class="row">
            <div class="col-xs-12 thumbnail" id="divPic"></div>
            <div class="col-xs-12" id="button_div"></div> 
       </div>

Answer 1

我没有足够的声誉来发表评论，但您是否尝试过使用#010101 或#020202 作为背景颜色？这是图像边缘的颜色，因此选择其中任何一个都可以使其看起来尽可能平滑，而无需对图像应用透明度渐变或其他内容。

更新：

如果您需要真正平滑的过渡，您可以在背景图像顶部应用 CSS3 渐变以过渡到您想要的颜色。下面的 JSFiddle 有一个例子，使用下面的代码：https://jsfiddle.net/Auroratide/7j8c0v1k/

#divPic {
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, rgba(2, 2, 2, 0) 300px, rgba(2, 2, 2, 1) 400px), url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
}

我使用this Stack Overflow 的答案作为参考。