html - 如何在图像上放置 Bootstrap 面板

Question

我试图在图像上放置 Bootstrap 面板，但我添加了图像，但我根本看不到面板，所以需要知道如何在图片上放置面板。这是html代码

<div class="row">
            <div class="col-xs-12">
                <div class="auroraXbodypic">
                    <div class="auroraXpanelBody">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                      Basic panel example
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                      Basic panel example
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

这是图片的CSS

.auroraXbodypic {
    content:url(../images/pic.png);

}

基本上我试图在图片上并排显示两个面板。

JSFIDDLE

Answer 1

改变你的CSS:

.auroraXbodypic {
    background-image:url(http://placehold.it/350x150);
    -webkit-background-size: cover; /* for Chrome and Safari */
    background-size: cover; /* for others */
}

JSFIDDLE