我有一个div与背景颜色渐变绝对定位。我有这个文本,当我向上滚动文本时,我想要更改为白色。
我正在使用'mix-blend-mode'属性来实现此目的,但我找不到任何将文本从黑色变为白色的设置。有没有人以前做过这个或者能想到我能做的伎俩?
.bg-container {
position: fixed;
top: -30px;
left: 0;
width: 100px;
height: 100px;
}
.gradient-background {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
transform: skewY(-15deg);
}
.scroll-content {
position: absolute;
top: 50px;
}
.scroll-content p {
color: #000;
mix-blend-mode: overlay;
}
/*hack for iOS*/
.scroll-content p:after{
content: '\200c'
}
<div class="bg-container">
<div class="gradient-background">
</div>
</div>
<div class="scroll-content">
<p> abc 1 </p>
<p> abc 2 </p>
<p> abc 3 </p>
<p> abc 4 </p>
<p> abc 5 </p>
<p> abc 6 </p>
<p> abc 7 </p>
<p> abc 8 </p>
<p> abc 9 </p>
<p> abc 10 </p>
<p> abc 11 </p>
<p> abc 12 </p>
<p> abc 13 </p>
<p> abc 14 </p>
<p> abc 15 </p>
<p> abc 16 </p>
<p> abc 17 </p>
<p> abc 18 </p>
<p> abc 19 </p>
</div>
*编辑1:更改了我的示例snipet代码。背景渐变不仅仅是一个矩形div。它倾斜了一点,这就是它如此困难的原因。因此,文字在边界处变成了两个色调。
*为清晰起见编辑2:我希望文本在白色背景时为黑色(#000实体),在文本超过渐变/图像时为白色(#FFF实体)。我的内容是可滚动的文本,如代码示例中所示。
*编辑3:iOS Safari不兼容,除非您执行以下操作。将零宽度空间​ ;
添加到每个文本元素以使其工作。这可以通过我在CSS标记中添加的CSS属性轻松完成。
您可以使用渐变为文本着色。诀窍是使这个渐变类似于你的形状(形状边缘的相同程度和颜色变化)。由于您的倾斜元素是固定的,您需要修改渐变以创建文本滚动的魔术效果:
.gradient-background {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 200px;
background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
transform: skewY(-15deg);
transform-origin:left;
}
.scroll-content {
position: absolute;
top: 50px;
/* 165deg = 180deg - 15deg */
background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
<div class="gradient-background">
</div>
<div class="scroll-content">
<p> abc 1 </p>
<p> abc 2 </p>
<p> abc 3 </p>
<p> abc 4 </p>
<p> abc 5 </p>
<p> abc 6 </p>
<p> abc 7 </p>
<p> abc 8 </p>
<p> abc 9 </p>
<p> abc 10 </p>
<p> abc 11 </p>
<p> abc 12 </p>
<p> abc 13 </p>
<p> abc 14 </p>
<p> abc 15 </p>
<p> abc 16 </p>
<p> abc 17 </p>
<p> abc 18 </p>
<p> abc 19 </p>
</div>
你可以用一些javascript做到这一点:
$(document).ready(function() {
$(window).scroll(function() {
var bgHeight = $('.bg-container').height();
var scroll = $(window).scrollTop();
$('.scroll-content p').each((i, el) => {
var pPos = $(el).offset().top;
var pHeight = $(el).height();
if (pPos < (scroll - pHeight + bgHeight)) {
$(el).removeClass('black');
$(el).addClass('white');
} else {
$(el).addClass('black');
$(el).removeClass('white');
}
});
})
})
.bg-container {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.gradient-background {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-image: linear-gradient(to bottom, rgb(1, 55, 124) 15%, rgb(81, 155, 244));
}
.scroll-content {
position: relative;
z-index: 99999;
font-family: neuzeit-grotesk, sans-serif;
font-weight: 700;
}
.white {
color: #fff;
}
.black {
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-container">
<div class="gradient-background">
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="scroll-content menu_black">
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</div>
您可以使用JavaScript进行测量并将样式应用于您想要的范围内的标记,但您也可以做一些非常简单的事情来使文本可读(这属于“我能做的其他一些技巧”):
.scroll-content {
text-shadow: 0 0 3px white;
}
这只会在蓝色背景上显示,并在白色背景上消失。但这取决于你想要达到的效果。
即使使用JavaScript实现,您也可以将其视为渐进增强(对于无JS的用户)。