background:inheritの活用

background関連のプロパティは通常継承しません。なにも指定しなければ、背後の要素の背景が透けて見えるので、継承する必要もあまりありません。

でももちろん、inherit値を指定すれば継承することができます。

普通使うことはまずないと思いますが、せっかくなので、なにか活用できないかなと考えてみました。

<article>
	<h1>article</h1>
	<section>
		<h2>section1</h2>
		<section>
			<h3>section2</h3>
		</section>
	</section>
</article>
article {
	background: rgba(255, 0, 0, .2);
}

section {
	background: inherit;
}

背景に透過度のある色や画像を使って、それを子孫に継承させていけば、透過度が重なって入れ子になるほど背景色が濃くなっていきます。

この例ではarticle要素の背景色に透けた赤を指定して、section要素はそれを継承しています。入れ子になるほど、section要素の背景はより濃い赤になるわけです。

透過度があれば、画像背景でも、グラデーションでも応用できます。

See the Pen Practical use of "background:inherit" by uco (@escapism) on CodePen.9630

おそらくあまり使われることのないinheritですが、使ってみると意外と面白い使い道が見つかるかもしれませんね。

実用的かはともかく。

Comments