在一个页面站点的某一点更改菜单颜色

Posted 2023-02-23

【中文标题】在一个页面站点的某一点更改菜单颜色

【英文标题】：Change the menu color at one point of one page site

【发布时间】：2012-07-21 02:30:31

【问题描述】：

我正在制作一个单页作品集。该站点的内容将是水平滚动的，只有菜单是固定的。前两页是黑色的，最后一页是白色的。但是第三页是半黑半白的，这是两个背景的分隔符。

这是迄今为止我的问题的最佳解决方案：http://jsfiddle.net/a5a7x/1/ 我只有让它水平而不是垂直的问题。

这是我要拆分的页面内容：http://jsfiddle.net/n3FGr/

记住，我只需要拆分菜单，因为它是固定的，所以只有菜单会有拆分，内容会左右滑动。

【问题讨论】：

是背景图片还是颜色？

根据滚动量等更改文本颜色不应该是个问题，但是像这样改变字母中间的文本颜色是不可能的，除非你菜单是一个画布，你使用了一堆复杂的技巧。

哇你们真快。所以这是我创建的网站：dejan-markovic.com/DM-test 这是 jsfiddle：jsfiddle.net/V7YXC 这是我找到的网站，它使用我想要的相同的东西。还有它用图像和 z-index 制作的菜单：tokiolab.it/#

黑客：jsfiddle.net/KGWwD。想知道有没有什么好办法。

对于对角线，我无法通过 CSS 实现它，只能通过 SVG：jsfiddle.net/Z5RCg/1。

【参考方案1】：

Quick&Dirty 相当接近的解决方案

我已经探索了实现您目标的方法并进行了一些实验：

Text in middle-center Text in left-top angle Menu in left-top angle

我没有完整的解决方案，但结果还不错：(demo on dabblet)

HTML：

<div>
    <h1>Chess</h1>
</div>

CSS：

div 
    background: linear-gradient(45deg, black 52%, white 52%);


ul 
    background: linear-gradient(45deg, white 52%, black 52%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

工作方法：

每个渐变中的同步百分比：

52%： 62%：

优点：

纯html&css;

缺点：

仅支持 webkit；

画布方式

优点：

跨浏览器（移动端）

缺点：

需要javascript

SVG-方式

优点：

跨浏览器 Javascript 免费（静态） 比 Canvas 更语义化

【讨论】：

谢谢。你的想法启发了我 - 这是我摆弄的结果：jsfiddle.net/teHLS。

我想以 SVG 方式尝试它。这个解决方案真的很棒，但我总是遇到问题，当涉及到页面的水平滚动时。用你的代码你告诉元素那个有角度的分割页面后面是什么。但是我首先有一些黑色页面，然后是半页..我现在尝试一些如何制作 SVG 文本，但要放置所有页面的背景反转图像..所以黑色是白色文本，然后白色是黑色文字..但它并不简单..

@DeanDeey 是的，这是一个相当困难的问题。你做了什么？

jup，这就是问题所在。许多解决方案，但是当涉及到移动事物等滚动时，我总是遇到问题。我尝试使用 SVG 文本剪辑。所以从 SVG 制作菜单，然后放在一个反转的黑白图像后面，它应该随着内容滚动，所以文本应该完全改变..但这只是理论..最大的问题是，代码SVG 应该放在一起，等 10 行，但我需要将剪切图像放在内容 div 上，然后我就停了。

您的解决方案是最好的，除非您不注意内容重复。我明天将尝试创建 SVG 解决方案（现在是我所在地区的早上 6 点）

【参考方案2】：

难道你不能在 css3 中做一个对角渐变，比如黑色为 50%，然后白色为 51%？

background-image: linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -o-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -moz-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -webkit-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -ms-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);

background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.54, rgb(0,0,0)),
color-stop(0.55, rgb(255,255,255))
);

【参考方案3】：

如何更改菜单项的CSS颜色：

$('#link1 a').click(function()
    goTo(0,0);
$('#navigation ul li a').css('color','#fff');  
);


$('#link2 a').click(function()
    goTo(1,0);
$('#navigation ul li a').css('color','#fff');
);

$('#link3 a').click(function()
    goTo(2,0);
$('#navigation ul li a').css('color','#000');
);

$('#link4 a').click(function()
    goTo(3,0);
$('#navigation ul li a').css('color','#000');
);

JSFIDDLE：http://jsfiddle.net/V7YXC/2/

【讨论】：

脚本在黑页上使菜单变黑，并且只有在滚动到白页之后