CSS текстовое оформление: обратный

Question

Я удивлен, что в CSS нет «text-художественного оформления: обратный», потому что это кажется очень неудобным для использования JavaScript. И.Е. установите передний план и цвет фона для фона и переднего плана родителя соответственно.

Я заметил методы JavaScript для этого здесь

Конечно, это не так сложно?

Answer 1

Что вы называете отмененным? Вы хотите установить фон в качестве цвета переднего плана и наоборот? (Может быть, это глупый комментарий, но если это так, то это не украшение, не так ли?)

В любом случае, у вас будет драка между DRY и MVC:

• либо вы объявляете новый класс CSS каждый раз, когда вы хотите сделать это. Это Избыточный и болезненный, но вы действительно отделил стиль от кода.

Обычно:

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


.mydiv:hover {
   color: red;
   background-color: blue;
}

• другой вариант - сделать это через javascript. Proxify предложил использовать jQuery.

  Результат, вероятно, будет выглядеть так ... (не проверено)

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

Answer 2

Концепция «переворачивания» фона и стиля текста на переднем плане не так просто реализовать в браузере. Если в браузере разрешено использование «text-ornament: reverse», должно ли фоновое изображение также переворачиваться на текст? Это не то, что сегодня может нарисовать браузер.

Теперь рассмотрим прозрачность и альфа-значение. Есть много аспектов, которые делают вашу идею «обратного» неосуществимой для реализации вообще.

Answer 3

Как насчет чего-то вроде:

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

Таким образом, он использует белый цвет текста для темных задних цветов и черный цвет текста для более светлых цветов фона.

Answer 4

Оформить заказ - http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/

Answer 5

Хотя CSS не доступен для реверса текста, существует HTML-элемент с именем bdo (двунаправленное переопределение) и селектор dir = "rtl", и с его помощью вы можете реверсировать текст.

Вы можете перевернуть текст на своей странице

Если вы затем дадите ему класс, вы сможете добавить дополнительные элементы стиля, например, и вам нужно будет просмотреть исходный код этой страницы, чтобы «прочитать» то, что я сделал. (p.s. вам не нужно включать элемент , он существует для того, чтобы отличить код от остальной части этого сообщения ...)

You can reverse the text in your page

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

и т. Д.

Надеюсь, это поможет (O:

Answer 6

хорошо, вы можете попробовать использовать jQuery, это более простой способ добиться того же, что и в обычном javascript.