html - 背景尺寸 :100% is slightly less than 100%

Question

请考虑以下 HTML 和 CSS:

HTML

<ul class="test1">
<li><div>Lorem ipsum</div></li>
<li><div>dolor sit amet</div></li>
</ul>
<ul class="test2">
    <li><div>Lorem ipsum</div>
    </li><li><div>dolor sit amet</div></li>
</ul>

CSS

.test1 div {height:100px;}
.test2 div {height:200px;}
li 
{
    display: inline-block;
    width:100px;
    transition:background-position 0.2s ease;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 50%, #F60 50%);
    background-size: 100% 200%;
    background-position : top left;
}
li:hover{color: #fff;background-position: bottom left;}

cfr jsfiddle

背景是高度的 200%，并且背景的前 50% 是透明的，这意味着如果没有悬停，我们只能看到透明背景。但是，通过这种配置，我仍然可以在底部看到一条轻微的橙色 (#F60) 线，这是我的“渐变”背景的底部颜色。

如果我想解决这个问题，我必须以像素为单位指定背景大小，在这种情况下，我需要将背景大小设置为 (element size + 1 px)*2 。有人可以解释是什么原因造成的吗？这是一个很大的问题，因为我想在非固定高度的 block 上使用这种效果，所以百分比高度是强制性的......

Answer 1

所以这是一个使用 CSS 动画的更复杂的答案:DEMO

基本上，我创建了高度为 0% 的彩色 DIV 元素。在父 li 悬停时，它们会增长到 100% 高度。棘手的部分是阻止返回(收缩)动画在页面加载时播放:通过将白色背景应用于覆盖文本并在初始页面加载完成后淡出(隐藏初始化动画)来解决此问题。

向 HTML 标记添加了一些类和另一个 DIV:

<ul class="test1">
    <li><div class="text">Lorem ipsum</div><div class="orange"></div></li>
    <li><div class="text">dolor sit amet</div><div class="orange"></div></li>
</ul>

更新后的 CSS:
* 为简洁起见，我省略了 webkit 供应商前缀样式，它们包含在 Fiddle 中

li {
    float: left;
    list-style: none;
    width:100px;
    height: 100%;
    position: relative;
}
li:hover div.orange{
    animation: grow 1s 1 forwards;
}

li div.orange {
    position: absolute;
    bottom: 0;
    background: orange;
    height: 0%;
    width: 100%;
    z-index: -1;
    animation: shrink 1s 1 forwards;
}
li div.text { 
    padding: 5px; 
    width: 100%;
    height: 100%;
    animation: hideinit 1s 1 forwards;
}

@keyframes grow {
    from {height: 0%;}
    to {height: 100%;}
}
@keyframes shrink {
    from {height: 100%;}
    to {height: 0%;}
}
@keyframes hideinit {
    0% {background: white;}
    98% {background: white;}
    100% {background: none;}
}