html - div 的背景颜色和 div 的背景颜色之间的小差距 :after

Question

我在另一个里面有一个 html 标签，并且给里面的 html 标签一个线性渐变背景。我想用最深的渐变阴影填充内部 div 标签和容器 div 之间的空隙。我实现的解决方案有效，但在某些计算机上，container:after background 和 container linear-gradient background 之间存在一个小间隙。有没有其他人遇到过这样的事情？

<div class="image-wrapper">
  <div class="container">

  </div>
</div>

CSS:

.image-wrapper {
   width: 200px;
   height: 100px;
   background-color: white;
}

.container {
   height: 100px;
   position: relative;
   max-width: 100px;
   left: 75px;
   background: linear-gradient(to right,rgba(45,51,64,.6),transparent 75%);
}

.container:after {
   content: '';
   position: absolute;
   top: 0px;
   right: 100px;
   width: 20%;
   height: 100px;
   background: rgba(45,51,64,.6);
 }

这是一段代码:/03L4ub4r/1/

这个 fiddle 没有向我重现问题，我也无法在自己的计算机上重现它。

将开发人员工具中的后标签沿任一方向移动 1 像素会产生更大的间隙或与其他背景重叠。

这是错误的样子: http://postimg.org/image/yvgdtwuzb/a0499505/

这是一个 1 像素的自生成间隙在我的电脑上的样子: http://postimg.org/image/rbeamjo4f/a73784a1/

看起来线性渐变添加了一个 1px 的边框，其不透明度低于指定的边框。有没有人遇到过像这样的线性渐变的错误？

Answer 1

我从来没有找出错误发生的原因，而是以另一种方式解决了这个问题。使渐变从div标签的中间开始，然后延伸直到填满整个屏幕，将渐变部分停止在大致与内部div的宽度处。通过这样做，内部 div 标签之外的区域将被填充为最暗的渐变阴影。

.container:before {
   content: '';
   position: absolute;
   top: 0px;
   right: 50%;
   width: 200%;
   height: 100px;
   background: linear-gradient(to left,transparent 0,rgba(45,51,64,.6) 600px);
 }