Линейный градиент CSS не прокручивается с содержимым

Проблема

У меня есть текстовая область, которая использует линейный градиент в качестве фонового изображения. Я пытаюсь эмулировать эффект "линованной бумаги". Я установил font-size и line-height, чтобы получить правильный интервал между строками и текстом;

Текстовая область разлинованной бумаги с правильными полями

однако, как только я прокручиваю текстовое поле, я замечаю проблему:

Текстовая область разлинованной бумаги с перепутанным текстом и линиями

А именно, что у меня background-image не прокручивается вместе с текстом. Я пробовал background-attachment: scroll, background-attachment: fixed и background-attachment: local, и ни один из них не решил мою проблему.

CSS

textarea {
    height: 200px;
    font-size: 20px;
    line-height: 1;
    background-image: repeating-linear-gradient(to bottom,
                                                #fff,
                                                #fff 9.5%,
                                                #000 9.5%,
                                                #000 10%);
}

Скрипка


css background-image linear-gradients
person Jackson    schedule 28.05.2014    source источник
comment
background-attachment: local — единственное решение, которое у вас есть. Хотя он не получил широкой поддержки...   -  person Armel Larcier    schedule 28.05.2014

Ответы (1)


arrow_upward
0
arrow_downward

background-attachment: local на самом деле действительно работает; только не в Firefox, где я тестировал.

person Jackson    schedule 28.05.2014