引导:不透明度不适用于<div>

我有一个引导面板,我在其中设置不透明度,但它不工作。
背景图像设置良好。但是侧面的面板必须是透明的…相当半透明(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 */
} 

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