Белая линия появляется в конце градиента, заполненного div при определенной ширине браузера - PullRequest
Новая
       33

Белая линия появляется в конце градиента, заполненного div при определенной ширине браузера

0 голосов
/ 01 марта 2019

У меня есть div с идентификатором #gradient_div с background-image, установленным на linear-gradient.Я получаю разрыв между концом линейного градиента и концом div #gradient_div только при определенной ширине окна браузера.Когда я растягиваю и сужаю окно браузера, эта белая линия исчезает и появляется снова.

enter image description here

Кажется, что как-то связано с полем:

  • Когда для поля установлено значение margin: 0 1%;, при определенных значениях ширины окна появляется строка while.

    При 1% белая линия появляется всякий раз, когда ширина окна заканчивается в диапазоне 68-92 , например: 4 68 px-4 92 px, 5 68 px-5 92 px, 6 68 px-6 92 px и т. Д.

    Дляв других процентах полей слева и справа появляется строка с шириной страницы:

    • 2%: ширина страницы заканчивается в диапазоне 92-_04 и 42-54

    • 3%: ширина страницы заканчивается в диапазоне 34-41, 67-74 и 00-08

    • 30%: ширина страницы заканчивается 5 или 8

Существует НЕТ проблемы с белой линией , когда я просто устанавливаю цвет фонаs против градиента, например background: blue; или когда я установил background-image для изображения; ОБНОВЛЕНИЕ Этого также не происходит, если поле установлено в px.

Предложения по исправлению приветствуются, но в основном мне интересно понять почему эта строкапроисходит.Что вызывает это? 

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

1 Ответ

0 голосов
/ 01 марта 2019

Я бы немного увеличил размер фона, чтобы избежать этого: 

#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%

#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>
...