时间戳

首页 > 解决方案 > 如何在仅黑白范围内更改 CSS mix-blend-mode？

html - 如何在仅黑白范围内更改 CSS mix-blend-mode？

问题描述

我对 CSS 和 Web 开发并不陌生。目前，我需要为网站创建带有徽标的固定标题。logo是白色png（可以改变logo颜色），固定的header背景是透明的。客户希望在向下滚动且背景为白色时将徽标颜色更改为黑色，并在向下滚动且背景为黑色时将徽标颜色更改为白色。我使用 css mix-blend-mode 差异轻松地做到了。

/* CC for Fixed Header*/

.fixed-header {
     position: fixed;
     width: 100%;
     height: 80px;
     background-color: transparent;
     z-index: 999;
     mix-blend-mode: difference;
}

而且我没有为徽标应用混合混合模式。但现在的问题是，当我们滚动任何图像或任何彩色区域时，标志颜色会与棕褐色和其他颜色不同。我想要做的是，当我们向下滚动时，标志应该是黑色背景上的白色，标志应该是白色背景上的黑色，标志应该是白色的颜色和图像背景。我怎样才能做到这一点？先感谢您..！

标签： htmlcssuser-interfacemix-blend-mode

解决方案

推荐阅读