CSS линеен градиент не се превърта със съдържание

проблем

Имам текстово поле, което използва линеен градиент като фоново изображение. Опитвам се да имитирам ефект на "линирана хартия". Настроих моите font-size и line-height да получат правилното разстояние между редовете и текста;

Текстово поле с редова хартия с правилни полета

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

Текстово поле с редова хартия с объркан текст и линии

А именно, че моето фоново изображение не се превърта с текста. Опитах 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%);
}

Fiddle


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