Альтернативный цвет текста для каждой строки абзаца

Я пытаюсь изменить цвет текста на альтернативных строках абзаца. Проблема в том, что количество строк в абзаце будет зависеть от таких вещей, как размер экрана. Есть ли способ в CSS, где я могу иметь альтернативные цвета текста для каждой строки внутри тега <p>?Альтернативный цвет текста для каждой строки абзаца

Например, в следующем коде

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>

Каждая строка текста должен быть альтернативный цвет независимо от того, какие слова, на самом деле, на котором линии (которые, очевидно, будет зависеть от размера экрана).

Моим первым инстинктом было попытаться рассчитать количество строк на основе размера экрана, но тогда я не уверен, куда идти оттуда.

источник

2017-01-01 dalold

@Zak Пост, как есть, является слишком широким в настоящее время. Ему не хватает как попыток исследования, так и [mcve]. ОП не прочитал [ask]. Однако, если вы можете отредактировать сообщение и сделать его более чистым (и в то же время не меняя значения значительным образом), я обязательно открою сообщение. –

@BhargavRao Я представил редактирование, которое включает пример кода. Я думаю, что это отличный вопрос, который может порождать интересные ответы, поэтому, если это единственная проблема, я был бы признателен, если бы вы могли его повторно открыть. – Zak

Я открыл почту, но @dalold, было бы здорово, если бы вы могли попробовать. * Мой первый инстинкт состоял в том, чтобы попытаться рассчитать количество строк на основе размера экрана * и опубликовать ваши попытки здесь. –

Хороший вопрос! Для реализации только CSS можно использовать магию webkit-background-clip, а также градиент.

Вы можете опробовать мое решение по адресу https://jsfiddle.net/kavot054/, я также разместил ниже код HTML и CSS.

Обратите внимание на взаимосвязь между line-height текста и градиента; если вам нужно было изменить шрифт, например, вам нужно будет обновить оба эти файла.

Стоит также отметить, что webkit-background-clip работает только с веб-браузерами, поэтому вам следует быть осторожным, если подумать о доступности вашего сайта.

p { 
 
    line-height: 30px; 
 
    background: -webkit-repeating-linear-gradient(red, red 30px, blue 30px, blue 60px); 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. 
 
    Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>

источник

2017-01-01 17:12:04 Zak

Альтернативный цвет текста для каждой строки абзаца

ответ

Смежные вопросы