HTML
<div>
<p>inverted color</p>
</div>
CSS
div {
background-color: #f00;
}
p {
color: /* how to use inverted color here in relation with div background ? */
}
pRenkleri CSS ile ters çevirmenin bir yolu var mı ?
Orada color: transparent;neden olmasın color: invert;hatta CSS3 içinde?
outline-color: invert Lea Verou tarafından icat IE için. Ne yazık ki Opera (Presto), anahat ile doldurulan alanı kırpmadı overflow, bu yüzden orada çalışmayacak. Umarım bu demo, sonraki deneyler için hala yararlı olabilir.
Yanıtlar:
Arka planın aynı rengini paragrafa ekleyin ve ardından CSS ile ters çevirin:
div {
background-color: #f00;
}
p {
color: #f00;
-webkit-filter: invert(100%);
filter: invert(100%);
}<div>
<p>inverted color</p>
</div>İşte mix-blend-mode: differencearka plan her ne ise onu tersine çevirecek, sadece tek bir rengi değil, farklı bir yaklaşım :
div {
background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
color: white;
mix-blend-mode: difference;
}<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>Bunu halletmenin tek yolunun JavaScript kullanmak olduğunu düşünüyorum.
Belirli bir öğenin bu ters metin rengini deneyin
Bunu css3 ile yaparsanız, yalnızca en yeni tarayıcı sürümleriyle uyumludur.