我如何对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;
}

最后一个小提琴：Demo

在.mainCont：Demo

中添加更多内容

Answer 2

.divClass {
    box-shadow: 0 80px 80px gold inset;
}

或

.anotherDivClass {
    box-shadow: 0 0 80px gold;
}

取决于你把它放在哪个元素上。插图进入框内。如果没有插页，它就会超出范围。