引导程序：不透明性不适用于<div>

Question

我有一个引导面板，在其中设置不透明度，但是它不起作用。
背景图像设置都很好。但是侧面的面板需要透明...相当半透明（50％）。它没有发生。我已经尝试过opacity。 下面是代码：

<div class="col-lg-4 col-md-4 col-sm-4">
    <div class="panel panel-primary halfOpacity">
        <div class="panel-body">
    <!--    <div class="card border-primary mb-3">
                <div class="card-block special-card"> -->
                    <p>
                        <div class="image" style="text-align:center;">
                            <img src="dise-resized.png" alt="DISE"> 
                        </div>
                    </p>
                    <p><br></p>
                    <p>
                        <div class="input-group">
                            <span class="input-group-addon info">Username:</span>
                            <input type="text" id="username" name="username" class="form-control" placeholder="Enter NTID" required>
                        </div>
                    </p>
                    <p>
                        <div class="input-group">
                            <span class="input-group-addon info">Password:</span>
                            <input type="password" id="password" name="password" class="form-control" placeholder="Enter password" required>
                        </div>
                    </p>
                    <p>
                        <button class="btn btn-primary btn-block" type="submit">Login</button>
                    </p>
                <!--</div>
            </div> -->
        </div>
    </div>
</div>

CSS如下：

div.halfOpacity {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
} 

下面是现在的屏幕截图。
我需要白色背景是半透明的。

Answer 1

有时您可以使用!important某些类来解决此问题，或者尝试使用backgroud-color:transparent

div.halfOpacity {
    opacity: 0.6 !important;
    // or background-color:transparent;

}