背景色に合わせてテキスト色を自動で分ける

当サイトの【カラーチェックツール】で使っています。（★部分）
いちいちクラスを付けるなどして文字色を変えるのは大変なので、自動で変わるのはとても楽で助かります。

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった


<div class="textColor_change">
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
</div>


.textColor_change p:nth-child(1) { background-color: #9acd32; color: #9acd32;}
.textColor_change p:nth-child(2) { background-color: #d02090; color: #d02090;}
.textColor_change p:nth-child(3) { background-color: #007f92; color: #007f92;}
.textColor_change p:nth-child(4) { background-color: #eee; color: #eee;}
.textColor_change p:nth-child(5) { background-color: #6867cd; color: #6867cd;}

.textColor_change p span{
	filter: invert(100%) grayscale(100%) contrast(100);
	}

TOP