-webkit-linear-gradient在Chrome/Safari中导致条带化
Li *_*oyi 24 css google-chrome css3
标题基本概括了所有内容.下面的第一张图片是整个页面大约8000像素高的屏幕截图,采用最新版本的Chrome:
而这张照片是针对不同的页面(使用相同的CSS),大约800像素高:
这是代码:
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
渐变意味着从页面顶部切下250px.条带的程度似乎取决于页面的总高度这一事实非常奇怪:这两个页面之间的高度(800px和8000px)似乎有比第一个例子小但仍然明显的条带.
有趣的是,我以前使用过-webkit-gradient('linear'...)而且没有同样的问题; 我只换了,-webkit-linear-gradient所以它会与我-moz和-o渐变一致.
我还没有尝试过的Safari浏览器,但上面的代码使得它的工作在Firefox完美的罚款和亲切-的工作在Opera(颜色搞的一团糟,但梯度依然流畅).没关系IE,我放弃了.
有没有人见过这个？
更新:这也发生在我的Mac的Chrome/Safari上,但是这些频段大约是顶部图像中显示的频段的1/3,对于完全相同的页面.OSX Chrome和OSX Safari中的条带相同.
1/3的尺寸仍然很明显,但不是那么刺耳.实际页面位于http://www.techcreation.sg/page/web/Intro%20to%20XTags/,如果您想在其他浏览器中查看.CSS是使用less.js在浏览器中编译的"内联"css.
Gri*_*ave 15
看起来像一个webkit错误.我想出了下面的解决方案,在最新的Chrome和FF上测试过.简而言之,您将在主要内容后面放置一个包含背景的div.我还添加了一些样式以使IE更快乐.
鉴于此HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
结合此样式表:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
无论窗口大小如何,它应该看起来像这样:
| 归档时间： |
|
| 查看次数： |
22881 次 |
| 最近记录： |