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

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，图片的框架是一个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回答作为参考。