Question

<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％）..也许这会导致我的网站出现问题，只有身体的那部分有浏览器窗口的高度和宽度..更新新的背景颜色。看看这个图片，％值可能是错误的w.r.t颜色：1。First screenshot (Zoom=25%) 2。Second screenshot (Zoom=100%) 请访问www.harshalgajjar.tk查看该表。

Answer 1

这是正确的问题是宽度为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%;会产生同样的问题

使用webkit改变身体背景颜色会导致故障

1 个答案: