根据背景颜色反转CSS字体颜色
根据背景颜色反转CSS字体颜色
提问于 2013-06-07 18:18:21
是否有CSS属性可以根据background-color反转font-color，如下图所示？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-06-07 18:21:08
有一个名为mix-blend-mode的CSS属性，但IE不支持它。我推荐使用pseudo elements。如果你喜欢支持IE6和IE7，你也可以使用two DIVs代替伪元素。
.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>
Stack Overflow用户
发布于 2014-09-07 12:49:20
使用mix-blend-mode。
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>
Stack Overflow用户
发布于 2019-07-11 23:44:15
我认为这更容易理解。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.titulo{
text-align: center;
margin: 2em;
}
.padre{
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10em;
position: relative;
width: 1000px;
height: 500px;
}
.caja-1{
background-color: black;
width: 500px;
height: 500px;
left: 0;
mix-blend-mode: screen;
position:absolute;
}
.caja-3{
width: 500px;
height: 500px;
display: flex;
background-color: white;
position: absolute;
right: 0;
}
.texto{
font-size: 5em;
color: white;
mix-blend-mode: difference;
position:absolute;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ESTILOS CONTRASTADOS CSS3</title>
</head>
<body>
<h1 class="titulo">MIX-BLEND-MODE CSS EFFECT</h1>
<div class="padre">
<div class="caja-1"></div>
<div class="caja-3"></div>
<h1 class="texto">CODE STOCK CENTER</h1>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16981763
复制相关文章
相似问题