CSS text-decoration: reverse

Qu'est-ce que vous appelez a inversé? Voulez-vous définir l'arrière-plan comme couleur de premier plan et vice versa? (Peut-être est-ce un commentaire stupide, mais si donc ce n'est pas une décoration, est-ce?)

Quoi qu'il en soit, vous êtes sur le point de vous battre entre DRY et MVC ici:

• Soit vous déclarez une nouvelle classe CSS chaque fois que vous voulez le faire. C'est redondant et douloureux, mais vous avez bien séparé le style du code.

Typiquement:

.mydiv { background-color: blue; color: red; font-family:...; (...) } .mydiv:hover { color: red; background-color: blue; } 

• Une autre option est de le faire via JavaScript. Proxify a suggéré l'utilisation de jQuery.

  Le résultat ressemblerait probablement à cela … (pas testé)

 $(".invert").map(function (el) { var color = el.css("color"); var bgcolor = el.css("background-color"); el.css("color", bgcolor).css("background-color",color); }) 

Le concept de "renverser" l'arrière-plan et le style de premier plan du texte n'est pas si facile à mettre en œuvre sur le navigateur. Si l'on autorise votre "text-decoration: reverse" dans le navigateur, l'image de fond devrait-elle inverser les textes? Ce n'est pas ce qu'un navigateur peut aujourd'hui dessiner.

Considérons maintenant les transparents et ces valeurs alpha. Il existe de nombreux aspects qui rendent votre idée de «reverse» impossible à mettre en œuvre en général.

Bien, vous pouvez essayer d'utiliser jQuery, c'est un moyen plus simple d'atteindre le même javascript normal.

Que diriez-vous de quelque chose comme:

 var bgColor = "#123456"; var textColor = bgColor.match(/^#([0-8][0-9a-fA-F])+$/g) == null ? "#000000" : "#ffffff"; 

Donc, il utilise un texte en couleur blanche pour les couleurs foncées du bac et une couleur de texte noir pour des couleurs de fond plus claires.

Bien qu'il n'y ait pas de CSS disponible pour inverser le texte, il existe un élément html appelé bdo (bi-directional override) et le selector dir = "rtl" et avec lui, vous pouvez inverser le texte.

Vous pouvez inverser le texte dans votre page

Si vous lui donnez une classe, vous pouvez ajouter des éléments de style supplémentaires, par exemple, et vous devrez afficher le code source de cette page pour "lire" ce que j'ai fait. (Ps vous n'avez pas besoin d'inclure le Élément, c'est là pour différencier le code du reste de cette explosion …)

You can reverse the text in your page

.reverso { color: #cc3300; font-size: 200%; }

etc.

J'espère que ça aide (O:

Checkout this – http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/