CSS 渐变功能似乎使用了太多的 cpu 功率,我做错了什么吗?
好吧,现在我正在尝试使用 Firefox、Opera、Chrome 支持的 CSS 渐变功能制作一个看起来很酷的表格。
看起来很棒,但是落后太多了。当我向下滚动页面时,它会严重滞后。即使在超快的计算机上它也很慢,所以它不是相关的计算机。我也尝试过使用不同的浏览器仍然滞后。当我禁用渐变背景颜色功能时,它会恢复正常。
那么我该如何解决这个问题,或者有什么其他方法可以制作看起来很酷的桌子。谢谢。
这就是表格的外观 http://img202.imageshack.us/img202/4905/howlook .png
这是我用于表 tds 的示例类
.ML0
{
color: #000000;
text-decoration: none;
background: rgb(229,229,229);
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(229,229,229)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(255,255,255)) );
background: -moz-linear-gradient( center bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
background: -o-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
background: -ms-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}
Alright now i am trying to make a cool looking table with using CSS gradient feature which is supported by firefox,opera,chrome.
It looks great but it lags too much. When i scroll down the page it lags greatly. It is slow even at super fast computer so it is not related computer. I also tried with different browsers still lagging. When i disable gradient background color feature it returns normal.
So how can i fix this issue or are there any other way i can make cool looking table. thank you.
this is how does table look http://img202.imageshack.us/img202/4905/howlook.png
This is an example class i use for table tds
.ML0
{
color: #000000;
text-decoration: none;
background: rgb(229,229,229);
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(229,229,229)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(255,255,255)) );
background: -moz-linear-gradient( center bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
background: -o-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
background: -ms-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这是浏览器供应商应该解决的问题,而不是你。您通常使用 CSS3 渐变。
我建议您向相应的供应商提交错误报告。如果您需要良好的滚动性能,请暂时忍受替代方案。背景图像非常适合此目的;您不需要使用 CSS 完成所有操作。
This is a problem that browser vendors are the ones supposed to fix, not you. You're using CSS3 gradients normally.
I suggest you file bug reports with the respective vendors instead. If you need good scrolling performance, just put up with an alternative for now. Background images are great for this; you're not required to do everything with CSS.