根据背景色更改多个元素的颜色

Question

根据背景色更改多个元素的颜色

7

我是一名有用的助手，可以为您翻译文本。以下是需要翻译的内容：

我有一个由多个元素组成的固定菜单。我正在尝试找到一种方法，使得所有这些元素的颜色根据背景颜色而改变。

这些元素是：

#page::before,
.logo-scroll

这两个元素都有一个白色的边框（没有填充）

主导航.main-navigation的链接及其边框为白色

标志是白色的。我也有黑色版本。

我的网站由3个部分颜色组成，黑色、白色和黄色。

当背景部分为黄色或白色时，我希望项目切换到黑色。

这个网站还在不断改进中，但您可以在这里看到它： https://www.sheree-new.shereewalker.com

我已经尝试过这个标志

https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html

但是我无法让它正常工作。我尝试为元素使用混合模式，但当在黄色上时会使线条变为蓝色。我尝试使用混合模式，然后使用去饱和度或灰度滤镜，但没有成功。

也许这对于一个问题来说太多了，但我想可能有一个插件可以在WordPress中处理这个问题？

基本上，我需要所有元素都是这样的https://codepen.io/whatthephuc/pen/QQagBj 包含左右导航元素的标题：

<div class="logo-scroll">
        <div class="scroll-text">
            <a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
        </div>
    </div>  

    <header id="masthead" class="site-header">
        <nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'sheree_walker' ); ?></button>
            <?php
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
            ) );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

CSS

header#masthead {
    height: calc(100vh - 60px);
    width: 75px;
    position: fixed;
    float: right;
    right: 30px;
    top:30px;
}

#site-navigation {
    transform: rotate(90deg);
    transform-origin: top left;
    position: relative;
    right: -75px;
    width: calc(100vh - 60px);
}

.main-navigation li {
    float: left;
    position: relative;
    text-align: center;
    width: 33.33%;
    padding: 23px 20px 21px 20px;
    font-size: 23px;
    font-family: 'NeurialGrotesk';
}

.main-navigation li {
    border-bottom: 2px solid white;
}

.main-navigation li:nth-child(n+1) {
    border-right: 2px solid white;
}

.main-navigation a {
    color: white;
    letter-spacing: .5px;
}

#page::before {
    content: "";
    position: fixed;
    top: 30px;
    bottom: 30px;
    left: 30px;
    right: 30px;
    border: 2px solid white;
    pointer-events: none;
}

.logo-scroll {
    position: fixed;
    left: 30px;
    top: 30px;
    bottom: 30px;
    border: 2px solid white;
    width: 75px;
}

.scroll-text {
    position: fixed;
}

所有的部分都有黄色或白色的类 - 默认背景为黑色。

任何关于适合的插件的帮助或建议都将是非常好的。

**编辑 - 如果应用于背景颜色，这样的内容将是完美的。

https://github.com/kennethcachia/background-check

我刚刚尝试了这个方法，有点效果，但也会随机生成一个背景颜色。

contrast();

function contrast() {

    var R, G, B, C, L;

    $( "main-navigation a" ).each(function() {

        R = (Math.floor(Math.random() * 256));
        G = (Math.floor(Math.random() * 256));
        B = (Math.floor(Math.random() * 256));

        $( this ).css( 'background-color', 'rgb(' + R + ',' + G + ',' + B + ')' );

        C = [ R/255, G/255, B/255 ];

        for ( var i = 0; i < C.length; ++i ) {

            if ( C[i] <= 0.03928 ) {

                C[i] = C[i] / 12.92

            } else {

                C[i] = Math.pow( ( C[i] + 0.055 ) / 1.055, 2.4);

            }

        }

        L = 0.2126 * C[0] + 0.7152 * C[1] + 0.0722 * C[2];

        if ( L > 0.179 ) {

            $( this ).css( 'color', 'black' );

        } else {

            $( this ).css( 'color', 'white' );

        }

    });

}

- Mr Toad

一种解决方案是使用 mix-blend-mode: difference; 请查看此文章：Methods for Contrasting Text Against Backgrounds - enxaneta

你好。谢谢你的答复，但是我已经尝试过这个方法了。结果是蓝色在黄色上不是黑色。然后我尝试应用去饱和度或灰度滤镜来使蓝色变为黑色，但是没有成功。 - Mr Toad

1

嗨。不知道wp插件，但如果您可以让[https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html]为标志工作，您可以将线条制作成svg，而不是边框，因为它们是固定的。然后可以使用相同的技巧。 - Salix

2个回答

0

这是一个使用JS + CSS的非常基本的实现，它在滚动和调整大小时向导航块添加了彩色子元素：

addEventListener("scroll", fixNavigation);
addEventListener("resize", fixNavigation);
if (document.readyState === "complate") fixNavigation();
else addEventListener("load", fixNavigation);

function fixNavigation() {
  [...document.querySelectorAll("#nav>.nav-background")].forEach(item => item.remove());
  var nav = document.getElementById("nav");
  var scrolled = document.documentElement.scrollTop;
  var currentHeight = 0;
  document.querySelectorAll(".box").forEach(function(box) {
    var navBackground = document.createElement("div");
    navBackground.className = "nav-background";
    nav.appendChild(navBackground);
    navBackground.setAttribute("style", `top: ${currentHeight - scrolled}px; background: ${box.getAttribute("other-color")};`);
    currentHeight += box.offsetHeight;
  });
}

body {
  margin: 0;
}

#nav {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 40px;
}

.box {
  width: 100%;
  height: 100px;
}

.red {
  background: #ff8888;
}

.green {
  background: #a2ffa2;
}

.blue {
  background: #7171ff;
}

.nav-background {
  pointer-events: none;
  position: absolute;
  height: 100px;
  right: 0;
  left: 0;
}

<div id="nav">

</div>
<div class="box red" other-color="purple"></div>
<div class="box green" other-color="black"></div>
<div class="box blue" other-color="yellow"></div>

- nick zoum

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rafaelcastrocouto · Accepted Answer

这里是一个使用JavaScript控制文字颜色的基本方法。

你可以根据滚动高度精确控制想要更改颜色的位置。

var p = document.querySelector('p');
var d = document.querySelectorAll('div');
var colors = ['white', 'red', 'black'];
var offset = 0.025;
var scrollHeight = document.documentElement.scrollHeight-innerHeight;
window.addEventListener('scroll', function () {
  var scroll = scrollY/scrollHeight;
  p.style.color = colors[0];
  var h = 0;
  for (var i=1; i<d.length; i++) {
    h += d[i-1].offsetHeight;
    if (scroll > (h/scrollHeight)-offset) p.style.color = colors[i];
  }
});

body {
  margin: 0;
}
div {
}
.black {
  background: black;
  height: 150vh;
}
.yellow {
  background: yellow;
  height: 100vh;
}
.white {
  background: white;
  height: 200vh;
}
p {
  color: white;
  position: fixed;
}

<p>I'll change color on scroll</p>
<div class="black"></div>
<div class="yellow"></div>
<div class="white"></div>