Инвертировать CSS шрифт-цвет в зависимости от цвета фона
есть ли свойство CSS для инвертирования font-color
в зависимости от background-color
нравится эта картина?
2 ответов
существует свойство CSS под названием mix-blend-mode, но он не поддерживается IE. Я рекомендую использовать псевдо элементами. Если вы хотите поддерживать IE6 и IE7, вы также можете использовать два ДИВС вместо псевдоэлементов.
.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>
Да, теперь есть. Используя mix-blend-mode
, Это можно сделать с помощью CSS.
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>
на данный момент это кровоточащий край и не широко поддерживается всеми браузерами - это может быть стандартный-нибудь. Вероятно, для этого вам нужно включить функцию blend-modes правильно.