具有对比度父对象的粘性css效果

我正在尝试只使用CSS（不使用svg）创建粘性效果。 一切正常，但我的父容器有一个

对比度过滤器

，我不能在子元素上使用颜色（对比度过滤器会更改颜色）

是否有人知道一种基本的方法，可以仅使用CSS实现此效果，或者反转对比度过滤器以在子元素上获得正确的颜色

我的代码：

正文{
背景：#fff；
}
.斑点{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景：#fff；
宽度：400px；
高度：200px；
保证金：自动；
过滤器：对比度（20）；
-webkit过滤器：对比度（20）；
}
blob先生{
背景：黑色；
宽度：100px；
高度：100px；
位置：绝对位置；
左：50%；
最高：50%；
利润上限：-50px；
左边距：-50px；
边界半径：100%；
过渡：立方贝塞尔（0.82,0.1,0.24,0.99）2.5s；
-webkit过渡：立方贝塞尔（0.82,0.1,0.24,0.99）2.5s；
盒影：0 0 30px 10px黑色；
}
.blob:悬停.blob:第一个孩子{
转换：translateX（-70px）；
}
.blob:悬停.blob:最后一个孩子{
转换：translateX（70px）；
}

---

我已经让你生效了。在容器上，我设置了一个覆盖它的伪元素，使用您想要的任何颜色

使用混合混合模式，我可以在容器为黑色的位置设置此颜色，保持剩余的白色：

（顺便说一句，效果很好！）

正文{
背景：#fff；
}
.斑点{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景：#fff；
宽度：400px；
高度：200px；
保证金：自动；
过滤器：对比度（20）；
-webkit过滤器：对比度（20）；
}
.blobs:之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景颜色：珊瑚；
混合模式：轻量化；
}
blob先生{
背景：黑色；
宽度：100px；
高度：100px；
位置：绝对位置；
左：50%；
最高：50%；
利润上限：-50px；
左边距：-50px；
边界半径：100%；
过渡：立方贝塞尔（0.82,0.1,0.24,0.99）1.5s；
盒影：0 0 30px 10px黑色；
}
.blob:悬停.blob:第一个孩子{
转换：translateX（-70px）；
}
.blob:悬停.blob:最后一个孩子{
转换：translateX（70px）；
}

---

对于这个答案，我只需更改filter属性

contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45)

• 首先，我们将对比度设置为15（如果你问我，20会使边缘有点太硬）
• 然后我们将其设置回.5（是的，您可以堆叠这些东西）

现在我们有了浅灰色背景和暗灰色斑点

• 涂上乌贼墨（这会给它一种颜色）
• 添加1.85亮度（现在背景再次为白色，我们有彩色斑点）
• 色调旋转以获得正确的色调
• 饱和使其饱和

列表中的最后三个属性对于获得正确的颜色至关重要。你的目标是rgb（255、113、93）。应用此行后，颜色为rgb（255、115、94）

你可以看到它的工作原理

---

作为旁注。您还可以堆叠变换，这意味着如果您想将斑点居中，就不必使用负边距，而是使用

translate（-50%，-50%）

技巧。然后，当您将鼠标悬停在它们上方时，您可以简单地像这样堆叠变换

translate（-50%，-50%）translateX（-70px）

，真不错！我认为这个属性不支持IE，你有IE解决方案吗？非常感谢。谢谢@vals，但它的工作原理与您的第一个代码片段不同。我需要一个全面的支持解决方案，但我不知道该怎么办：（您好@vals，颜色与您定义的颜色不同，悬停时有一个奇怪的阴影：（正如我在回答中指出的那样，获得最终颜色的方法有点复杂。因为你只能使用原色和补色，你需要调整最终颜色，使其与两个元素的alpha匹配。我编辑了答案，以获得与你问题中的颜色大致相同的颜色。但我没有看到阴影。我看到了减慢了过渡速度，但我仍然看不到阴影…感谢您的时间。请看这张图片：如果它能帮助您：Hi@RedBreast，不幸的是，它没有。在您的示例中，颜色会发生变化，因为父级上的对比度过滤器。我正在寻找解决此行为的方法，并使用正确的颜色创建子级元素r、 把你的红色换成绿色，你就会看到问题了对不起，我帮不了你，但这真的很酷：Pon悬停它把颜色换成黑色。：（我相信在safari中有某种bug…你的小提琴在PC上工作正常