css - 如何根据背景反转笔触文本颜色
问题描述
我有 2 个 div,每个 50% 的宽度。有一个巨大的标题 h1 应该有这两个 div 的颜色。我尝试过混合混合模式,但是当设置为差异时它会给我一些随机颜色。我的目标是反转颜色但保持 div 的颜色。这是一个 codepen 文件,我试图让它尽可能简单:https ://codepen.io/lukagurovic/pen/MLoZmj 在这个例子中,最终效果应该是这样的:
但我不确定为什么它不适用于这些颜色。此外,这些 div 是交互式的,因此颜色必须随着 div 在悬停时宽度的增加而动态变化,并且应该只有文本的笔触而没有任何填充
body {
height: 100vh;
width: 100%;
position: relative;
background-color: #510035;
margin: 0 auto;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
}
.half-pager {
width: 50%;
height: 100%;
position: absolute;
display: inline-block;
overflow: hidden;
text-align: center;
}
.half-pager-dark {
background-color: #510035;
}
.half-pager-light {
right: 0;
background-color: #E8E8E8;
float: right;
}
.lp-header {
position: absolute;
}
.lp-header {
color:transparent;
mix-blend-mode: difference;
-webkit-text-stroke: 3px rgb(126, 124, 133);
z-index: 1;
}
.lp-header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
解决方案
一种想法是复制文本并使用 CSS 变量来定义颜色,以便您可以在一个位置轻松更改它们。我使用剪辑路径隐藏一个文本的一半并显示另一半:
body {
margin: 0;
--c1:#510035;
--c2:#E8E8E8;
}
body:hover {
--c1:red;
--c2:blue;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
margin: 0;
}
.first {
background:var(--c1);
-webkit-text-stroke: 3px var(--c2);
}
.second {
background:var(--c2);
-webkit-text-stroke: 3px var(--c1);
clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}
.lp-header {
position:absolute;
top:0;
left:0;
right:0;
min-height:100vh;
box-sizing:border-box;
color: transparent;
z-index: 1;
padding: 50px;
text-align: center;
transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
推荐阅读
- javascript - 通过Javascript自动单击具有唯一标签和类名的页面上的按钮的方法
- react-native - 可以从componentN之外的组件导航componentN(createAppContainer)吗?有可能吗?
- python - 使用 class_wight='balanced' 时如何找出 Logistic 回归中使用的原始权重值?
- css - 如果移动一个或另一个,如何使两个 div 靠近在一起
- reactjs - 如何在 react-testing-library 中的单选按钮上触发更改事件?
- angular - Angular 6 在本地主机上工作但不发布到服务器
- javascript - 如果表单字段有效并填写,则仅显示模式框 - JQuery
- swift - 重新排序时如何保持单元格颜色特性?
- android - WP REST API 和 React Native:如何显示不在 HTML 中的内容
- javascript - React-JS - jQuery 灯箱问题