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

Question

我正在创建一个单页组合.网站的内容将是水平滚动的,只有菜单是固定的.前两页是黑色,最后一页是白色.但是第3页是半黑半白,它是两种背景的分离者.

到目前为止,这是我的问题的最佳解决方案:http://jsfiddle.net/a5a7x/1/ 我只有问题,使它不是垂直的horizo​​tnal.

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

请记住,我只需要拆分菜单,因为它将被修复,所以当内容将左右滑动时,只有菜单会有分割.

Answer 1

快速而肮脏的相当紧密的解决方案

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

• 中间的文字
• 左上角的文字
• 左上角的菜单
  

我没有完整的解决方案,但结果非常好:( 关于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))
);