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

当サイトの【カラーチェックツール】で使っています。（★部分）

文字色を背景色と同じにして、フィルターで色を反転させモノクロ化して白黒どちらかに振り切っているだけなので、
それなら最初から良さそうな色を指定したらいいのでは…とも言う…けど、【カラーチェックツール】みたいに使うときは大変に楽ですw

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった


<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