只使用一个div(没有背景图片/前景图片/图层),能否实现这个效果?
ol {
border: 1px #d8d8d8 dashed;
font: 2em/1.6em Arial;
position: relative;
}
ol:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
pointer-events: none;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
width: 100%;
height: 4em;
}
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ol>
由于将pointer-events
设置为none
,渐变下方的文本也将无法被选择或点击。
使用 mask
属性可以实现相同的效果。
ol {
--mask: linear-gradient(to bottom,
rgba(0,0,0, 1) 0, rgba(0,0,0, 1) 40%,
rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
) 100% 50% / 100% 100% repeat-x;
border: 1px #d8d8d8 dashed;
font: 2em/1.6em Arial;
-webkit-mask: var(--mask);
mask: var(--mask);
}
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ol>
ol
标签用div
标签包裹,并最终得到了我所需的效果。http://codepen.io/1deadpixel/pen/XNXaMY - phip个人认为,将一个次要元素作为“重叠”使用效果非常好。我通过定义一个新的tag
来实现这一点。这样就可以轻松地对任何你想要的元素添加所需的淡出效果,只需在结尾处使用<fade/>
。
div {
position: relative;
}
fade {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.9)
100%);
}
<div>
text
<br>
text
<br>
text
<fade/>
</div>
为 fade
元素设置绝对位置和渐变背景与预期相同,只要您记得将其父元素的位置设置为 relative
。
<style>
.fade {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
</style>
这里有一个示例给你参考 http://jsfiddle.net/nrgx7/
ol
或div
在你的问题上下文中并不重要。 - Paulie_D