css - 我怎样才能对div的底部产生淡入淡出效果？

Question

我需要在图像中的 div 底部设置淡入淡出效果。请帮忙。

Answer 1

我会在您的主容器上使用一个伪元素来达到预期的效果。

类似这样，

html:

<div class="mainCont">
    <p>Content goes here</p>
</div>

CSS:

.mainCont {
    position: relative;
}

.mainCont:after {
    content: "";
    width: 100%;
    height: 80px;
    display: block;
    position: absolute;
    background: rgba(150, 123, 19, 1);
    background: -webkit-gradient(linear, 0% 0% 0% 100%, from(rgba(150, 123, 19, 0.1)), to(rgba(150, 123, 19, 1)));
    background: -webkit-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    background: -moz-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    background: -ms-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    background: -o-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    bottom: 0;
    left: 0;
    z-index: 10;
}

最后一个 fiddle :Demo

在 .mainCont 中添加更多内容:Demo