html - 透明的 div 但不是里面的内容

Question

在我开始之前，是的，我知道这个问题已经被问过很多次了，但我还是无法解决这个问题。我有一个 div 是透明的，但我不想透明的内容，即文本和输入字段。

请不要链接到以前的答案，因为我关注了他们但没有成功。

这是我的 CSS 代码的样子:

.csmodal {
    height: 300px;
    width: 600px;
    background-color: rgba(25, 11, 36, .5);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
    float: none;
    display: inline-block;
    padding: 30px;
    margin: 200px auto;
    opacity: 0.4;
}

.cs-container {
    margin-right: auto;
    margin-left: auto;
}

#cs-headline {
    margin-bottom: 20px;
}

#cs-description {
    font-size: 14px;
    line-height: 20px;
    color: #eeee22;
}

h1 {
    margin: 10px 0;
    text-rendering: optimizelegibility;
    color: #eeee22;
}

HTML代码:

<div class="cs-container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 csmodal">
            <h1 id="cs-headline">Website Launching Soon</h1>
            <div id="cs-description">
                <p style="text-align: center;">The launch of our official website is coming soon. Stay tuned!</p>
            </div>
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
            </form>
        </div>
    </div> </div>

Answer 1

指定元素不透明度会更改父元素和所有子元素的不透明度。

就功能而言，我们想要的只是能够看到背景。在这种情况下，我们可以像这样应用背景颜色或 alpha channel :background-color:rgba({0 -255},{0 -255},{0 -255},[0 - 1] 最后一部分决定不透明度。

如果你想要一张带有 alpha channel 的图像，你需要有一个透明的资源。 like so .

如果您可以将元素定位在绝对位置并对其应用不透明度等等，请发挥您的想象力