如何仅在CSS中创建阴影，不透明背景？

Question

出于某种原因，我无法弄清楚如何恰当地设计这个样式。

或者我是否需要使用此图片？

以下是我目前的情况：

#hero #hero-text {
    position: absolute;
    bottom: 0px;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    background-color: black;
    opacity: .3;

}

#hero #hero-text p {
    color: white;
    opacity: 1.0;
}

Answer 1

只需使用

background-color: rgba(0,0,0,0.5);