在一个页面站点的一个点上更改菜单颜色
在一个页面站点的一个点上更改菜单颜色
提问于 2012-07-23 01:55:19
我正在制作一个一页的文件夹。该网站的内容将水平滚动，只有菜单是固定的。前两页是黑色的，最后一页是白色的。但是第三页是半黑半白的，它是两种背景的分隔符。
到目前为止，这是我的问题的最佳解决方案：http://jsfiddle.net/a5a7x/1/，我只有问题是水平方向，而不是垂直方向。
这是我想要分割的页面内容：http://jsfiddle.net/n3FGr/
记住，我只需要拆分菜单，因为它是固定的，所以只有菜单会有拆分，当内容左右滑动时。
回答 3
Stack Overflow用户
发布于 2012-07-26 19:25:11
Quick&Dirty相当接近的解决方案
我已经探索了实现你的目标的方法，并做了一些实验：
我没有完整的解决方案，但结果相当不错：()
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；
画布之路
优势：
- Cross-browser (也是移动设备)
缺点：
- Javascript所需的
SVG方式
优势：
- Cross-browser
- Javascript自由(静态)
- 比Canvas
更具语义
Stack Overflow用户
发布于 2012-07-24 07:57:26
你不能在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))
);Stack Overflow用户
发布于 2012-07-24 08:04:46
如何在单击菜单项时更改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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11602632
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号