个人中心
gpt4 book ai didi

javascript - 如何制作位置为 :fixed to change the color when passing a certain border? 的区 block

转载 作者：行者123 更新时间：2023-12-04 03:22:01 26 4
gpt4 key购买 nike

让我们想象一下，有一个具有交替 block 的站点，一些 block 是蓝色的，另一些是红色的，还有一个 position:fixed 的 block 是蓝色的。在蓝色背景上滚动页面时，应该是红色的，在红色背景上应该是蓝色的

enter image description here

这是代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <div class="fixed"></div>
    <div class="block red"></div>
    <div class="block blue"></div>
    <div class="block red"></div>
    <div class="block blue"></div>
</body>
</html>
    .block {
        width: 100%;
        height: 200px;
    }

    .red {
        background: red;
    }

    .blue {
        background: blue;
    }

    .fixed {
        position: fixed;
        background: blue;
        top: 100px;
        left: 100px;
        z-index: 10;
        width: 80px;
        height: 80px;
    }


最佳答案

您可以使用 mix-blend-mode: difference 并将背景色设置为全红和全蓝值:

差异通过取红色、绿色和蓝色值差异的绝对值来工作:

rgb(1, 0, 0) red +
rgb(1, 0, 1) pink (full r and b)
=
rgb(0, 0, 1) blue

.block {
  width: 100%;
  height: 200px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.fixed {
  position: fixed;
  background: #ff00ff;
  mix-blend-mode: difference;
  top: 100px;
  left: 100px;
  z-index: 10;
  width: 80px;
  height: 80px;
}
<div class="fixed"></div>
<div class="block red"></div>
<div class="block blue"></div>
<div class="block red"></div>
<div class="block blue"></div>

关于javascript - 如何制作位置为 :fixed to change the color when passing a certain border? 的区 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68339758/

26 4 0
文章推荐： SQL语句不按升序排列名称
文章推荐： bitbucket - bitbucket 中某些文件中的编辑按钮被禁用
文章推荐： php - 我想从具有参数的 codeigniter URL 中删除索引
文章推荐： javascript - 如何使用不同的工作目录运行命令？