Как сделать локальные прикрепленные повторяющиеся линейные градиенты

Недавно я пытался создать текстовую область, которая использует повторяющийся линейный градиент для разделения строк, однако градиент не прикрепляется к текстовому полю, когда я прокручиваю. Я делаю что-то неправильно?

Кстати, вот код:

Кроме того, вот несколько URL-адресов, которые я использовал:

Пронумерованные и разделенные строки в текстовой области

Повторение урока по линейному градиенту

Источник

1 ответ

Решение

Поскольку прокручиваемый элемент textarea, нет .TextareaWrapper, Итак background-attachment: local не может применять прокрутку для своих дочерних элементов.

Вы можете объединить эти два фоновых изображения в одно background свойство с сокращениями, разделенными запятыми, и вам даже не понадобится TextareaWrapper больше.

      background: url("https://www.linkpicture.com/q/2cOaJ-2.png") 0px 11px/30px 33325px local no-repeat, repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%) left 10px/100% 45px local;

Эти два фона будут объединены в одно изображение, чтобы иметь одинаковую позицию прокрутки:

Источник
Другие вопросы по тегам