段落の各行のテキストの色を変更します。

段落の代替行のテキストの色を変更しようとしています。問題は、段落内の行数が画面サイズなどに依存することです。 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

、あるとして、現時点では広すぎます。研究の試みと[mcve]の両方が欠けている。 OPは[ask]を読んでいない。しかし、あなたが投稿を編集してよりきれいにすることができれば（そして同時に意味を大きく変えないで）、私は確かに投稿を開くでしょう。 –

@BhargavRao私は、コード例を含む編集を提出しました。面白い解答を生み出すことができる大きな問題だと思うので、もしそれが唯一の問題ならば、それを再び開くことができれば幸いです。 – Zak

私はポストを再開しましたが、@ダルトン、試してみるといいですね。*私の最初の本能は、画面サイズ*に基づいて行数を計算して試してみることでした。 –

良い質問！これをCSSのみで実装するには、魔法のwebkit-background-clipとグラデーションを使用できます。

私の解決策はhttps://jsfiddle.net/kavot054/で試してみることができます。また、HTMLとCSSのコードを下に記します。

テキストのline-heightとグラデーションとの関係に注目してください。たとえば、フォントを変更する場合は、これらの両方を更新する必要があります。

webkit-background-clipはウェブキットブラウザでのみ動作するため、サイトのアクセシビリティについては注意が必要です。ポスト@Zak

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

段落の各行のテキストの色を変更します。

答えて

関連する問題