Инвертировать CSS шрифт-цвет в зависимости от фона-цвет

есть ли свойство CSS для инвертирования font-color в зависимости от background-color нравится эта картина?

2 53
html css

2 ответа:

есть свойство CSS под названием mix-blend-mode, но он не поддерживается IE. Я рекомендую использовать псевдо элементами. Если вы хотите поддерживать IE6 и IE7, вы также можете использовать два ДИВС вместо псевдо элементами.

enter image description here

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}
<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>
65

Да, теперь есть. Используя mix-blend-mode, Это можно сделать с помощью CSS.

blend-modes example

http://jsfiddle.net/1uubdtz6/

div {
    position:absolute;
    height:200px
}

/* A white bottom layer */
#whitebg { 
    background: white; 
    width:400px; 
    z-index:1
}

/* A black layer on top of the white bottom layer */
#blackbg { 
    background: black; 
    width:100px; 
    z-index:2
}

/* Some white text on top with blend-mode set to 'difference' */
span {
    position:absolute; 
    font-family: Arial, Helvetica; 
    font-size: 100px; 
    mix-blend-mode: difference;
    color: white;
    z-index: 3
}

/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered { 
    background-color: red;
    mix-blend-mode: screen;
    width:400px; 
    z-index:4
}
<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>

<span>test</span>

на данный момент это кровоточащий край и не широко поддерживается всеми браузерами - это может быть стандартный-нибудь. Вероятно, вам нужно включить функцию режимов наложения, чтобы это работало правильно.

http://html.adobe.com/webplatform/enable/

47