Question

我在另一个内部有一个html标签，并为内部html-tag提供了线性渐变背景。我想填补内部div标签和带有渐变阴影的container-div之间的差距。我实现的解决方案有效，但在某些计算机上容器之间有一个小的差距：在背景和容器线性渐变背景之后。还有其他人遇到过这样的事吗？

<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 /

这个小提琴不会向我重现这个问题，也不能在我自己的电脑上重现它。

将开发人员工具中的after-tag在任一方向上移动1px会产生更大的间隙或与其他背景重叠。

这就是bug的样子： 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);
 }

Answer 2

您是否尝试过填充和边距？可能是某些浏览器会向其中一个div添加一个轻微的填充或边距。

div的背景颜色与div的背景颜色之间的小差距：之后

2 个答案: