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

Question

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

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

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

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

Answer 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 更语义化

Answer 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))
);

Answer 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/