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

Question

我有一个用于横幅的 div 标签，因此我将其内容设置为图像。但是，我想在该 div 内显示一些文本和字形图标。我试图使用 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>