在特定浏览器宽度下，白线出现在渐变填充div的末尾 [英] White line appears at end of gradient filled div at specific browser widths

问题描述

我有一个ID为#gradient_div且其background-image设置为linear-gradient的div.仅在某些浏览器窗口宽度下，线性渐变的末尾与div #gradient_div的末尾之间出现了间隙.当我拉伸和收缩浏览器窗口时，这条白线消失并重新出现.

I have a div with id #gradient_div with a background-image set to linear-gradient. I'm getting a gap between the end of the linear-gradient and the end of the div #gradient_div only at certain browser window widths. As I stretch and shrink the browser window this white line disappears and reappears.

似乎与边距有关:

• 当我将边距设置为margin: 0 1%;时，出现while行 在特定的窗口宽度.

• When I have the margin set to margin: 0 1%;, the while line appears at specific window widths.

在窗口宽度结束时，在 1％处出现白线 68-92 ex的范围:4 68 px-4 92 px，5 68 px -5 92 px， 6 68 px-6 92 px等

At 1% the white line appears whenever the window width ends in the range of 68-92 ex: 468px-492px, 568px-592px, 668px-692px, etc.

对于其他边距左右百分比，该行显示在这些页面上 宽度:

For other margin left and right percentages, the line appears at these page widths:

• 2％:页面宽度在92-_04和42-54之间结束

• 2% : page widths ending in the range 92-_04 and 42-54

3％:页面宽度在34-41、67-74和00-08范围内结束

3% : page widths ending in the range 34-41, 67-74, and 00-08

30％:页面宽度以5或8结尾

30%: page widths ending in 5 or 8

当我只是将背景设置为与渐变相反的颜色(例如background: blue;)或将background-image设置为图像时，没有没有白线问题； 更新当以px为单位设置边距时也不会发生.

There is NO white line problem when I just set the background to a color as opposed to a gradient, ex background: blue; or when I set the background-image to an image; UPDATE It also doesn't happen when margin is set in px.

欢迎解决此问题的建议，但是我最想了解为什么这行正在发生.是什么原因造成的?

Suggestions to fix this are welcome but I'm mostly interested in understanding why this line is happening. What's causing this?

    #gradient_div{
    background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86) , rgb(152, 4, 228));
    height: 100px;
    margin: 0 1%;
    border: 1px solid black;
    }

<div id="gradient_div"></div>

推荐答案

为了避免这种情况，我会稍微增加背景尺寸:

I would increase the size of background a little to avoid this:

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: 101% 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

您也可以尝试仅添加1px，它可能会少于1%

You can also try to add only 1px it will be probably less than 1%

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: calc(100% + 1px) 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

这篇关于在特定浏览器宽度下，白线出现在渐变填充div的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！