Question

我有一个用于横幅的div标签，因此我将其内容设置为图像。但是，我想在该div中显示一些文本和glyphicons。我正在尝试使用Bootstrap Grid将其布局，但我无法在div中显示任何内容。我试过放一些简单的文字而没有任何运气。

做这样的事情的正确方法是什么？

这是我尝试过的。图像显示但没有文字。

div.banner {
    content: url('../Images/banner.jpg');
    background-color: #A5B7C7;
}

<div class="banner">
    <div class="row">
        <div class="col-md-6"> something goes here</div>
        <div class="col-md-6"> something else</div>
    </div>
</div>

Answer 1

content属性将替换元素的内容。相反 - 您可以使用:before伪类（或从content切换到background-iamge）：

div.banner {
    background-color: #A5B7C7;
}
div.banner:before {
    content: url('https://dummyimage.com/150x100/263cb5/ffffff');  
}

<div class="banner">
    <div class="row">
        <div class="col-md-6"> something goes here</div>
        <div class="col-md-6"> something else</div>
    </div>
</div>

Answer 2

使用background-image

的content内容

Answer 3

使用属性背景，而不是css属性内容，如：

div.banner {
    background: url('../Images/banner.jpg');
}

Answer 4

默认情况下，

background-image不允许将文字放在它上面。你必须添加更多的CSS。请将内容更改为.banner { background-image: url('../Images/banner.jpg'); background-color: #A5B7C7; } <div class="banner"> <div class="row"> <div class="col-md-6"> something goes here</div> <div class="col-md-6"> something else</div> </div> </div>

NULL

如何在div中显示带有图像内容的文本或图像？

4 个答案: