我的CSS渐变背景有问题,宽度/高度div为100%。这只是Chrome中的问题。我在div上有一些内容,当我将鼠标悬停在该div中的链接上时,渐变背景会以奇怪的方式破裂,并且基本上根本不会显示角度(只是显示为水平渐变)。这是我的CSS:
.landing{
display: block;
width: 100%;
min-height: 100%;
background: #f6e25a;
background: -moz-linear-gradient(-80deg,#f6e25a 0%,#f6e25a 35%,#f8e979 35.01%,#f6e25a 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f6e25a), color-stop(35%,#f6e25a), color-stop(35.1%,#f8e979), color-stop(100%,#f6e25a));
background: -webkit-linear-gradient(-80deg,#f6e25a 0%,#f6e25a 35%,#f8e979 35.01%,#f6e25a 100%);
background: -o-linear-gradient(-80deg,#f6e25a 0%,#f6e25a 35%,#f8e979 35.01%,#f6e25a 100%);
background: -ms-linear-gradient(-80deg,#f6e25a 0%,#f6e25a 35%,#f8e979 35.01%,#f6e25a 100%);
background: linear-gradient(150deg,#f6e25a 0%,#f6e25a 35%,#f8e979 35.01%,#f6e25a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e25a', endColorstr='#f6e25a',GradientType=1 );
}
这是在Chrome中的外观:
有什么线索吗?
最佳答案
这是Chrome中的已知错误。它最早是在2012年11月发布的,当前是优先级2,因此在下一发行版中可能不会修复。参见Chromium开发者论坛here
如果稍微改变角度,它应该可以再次工作。尝试使用-78deg而不是-80deg