<html>
<head>
<style>
body
{
font-family:'main';
font-size:12px;
background:#180153;
-webkit-animation:liveback 100s;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes liveback
{
0% {background: #180153;}
10% {background: #ad004b;}
20% {background: #7a1c00;}
30% {background: #09664c;}
40% {background: #5e6609;}
50% {background: #9e0b0b;}
60% {background: #9e0b92;}
70% {background: #0023b0;}
80% {background: #2e9100;}
90% {background: #ad8540;}
100% {background: #180153;}
}
</style>
<body> ...<table width=200% style="background:transparent;"><tr><td>..</td></tr>
</table>
</body>
</html>
我的页面有水平滚动(因为里面的表格有 200% 的宽度)..也许这在我的网站上引起了问题，只有 body 的那一部分具有浏览器窗口的高度和宽度..更新新的背景颜色。!看看这张图片，% 值可能是错误的 w.r.t 颜色:1。 First screenshot (Zoom=25%) 2. Second screenshot (Zoom=100%) 访问 www.harshalgajjar.tk 查看表格。
最佳答案
没错问题就是200%的宽度
我认为您可以像这样使用中间 DIV 创建四处走动:
CSS:
@-webkit-keyframes liveback {
0% {background: #180153;}
10% {background: #ad004b;}
20% {background: #7a1c00;}
30% {background: #09664c;}
40% {background: #5e6609;}
50% {background: #9e0b0b;}
60% {background: #9e0b92;}
70% {background: #0023b0;}
80% {background: #2e9100;}
90% {background: #ad8540;}
100% {background: #180153;}
}
body {
width: 100%;
overflow:hidden;
font-family:'main';
font-size:12px;
background:#180153;
-webkit-animation:liveback 100s;
-webkit-animation-iteration-count:infinite;
}
.outer-table{
width: 100%;
height: 100%; //or whatever you need
overflow: scroll;
}
HTML:
<body>
<div class="outer-table">
<table width=200% height=50% style="background:none;"><tr><td>..</td></tr>
</table>
</div>
</body>
注意:table 不是问题，只是 body 和 width: 200%; 会产生同样的问题
关于html - 使用 webkit 更改主体背景颜色会导致故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19836225/