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）线，这是我的＆＃34;渐变的底色＆＃34;背景。

如果我想解决这个问题，我必须以像素为单位指定背景大小，在这种情况下，我需要将背景大小设置为（元素大小+ 1 px）* 2。有人可以解释是什么导致这个？这是一个非常严重的问题，因为我想对非固定高度的块使用此效果，因此百分比高度是强制性的......

Answer 1

删除您添加的底部的行：

li{
background-attachment: fixed;
}

JSFiddle

为了回应dreamgt的评论，我为动画添加了一些额外的时间。从：

transition:background-position 0.2s ease;

要：

transition:background-position 0.5s ease;

New JSFiddle

Answer 2

我知道其他答案已经建议将背景尺寸高度增加到201％，并且你有大于的项目问题，比方说300px，但我尝试了202％并且能够增加div的大小到900px，没有出现橙色线。

总结如下：

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% 202%;
    background-position : top left;
}

祝你好运！

Answer 3

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

基本上，我创建了高度为0％的彩色DIV元素。在父母li悬停时，他们会增长到100％的身高。棘手的部分是阻止返回（缩小）动画在页面加载时播放：通过在叠加文本上应用白色背景并在初始页面加载完成后淡出（hideinit动画）来解决此问题。

在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供应商的前缀样式，它们包含在小提琴中

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;}
}

Answer 4

将身高再增加1％

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% 201%; /* <----------- increased height to 201% */
    background-position : top left;
}

DEMO

背景尺寸：100％略低于100％

4 个答案: