23

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

http://i.stack.imgur.com/uiVqu.jpg

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

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

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

4

3 回答 3

6

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

文字渐变

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

我没有完整的解决方案，但结果还不错：（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 更语义化
于 2012-07-26T11:25:10.720 回答
1

你不能在 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))
);
于 2012-07-23T23:57:25.790 回答
1

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

$('#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/

于 2012-07-24T00:04:45.713 回答