Wie kann ich Text oder Bild in einem div mit einem Bild in seinem Inhalt anzeigen?

Ich habe ein div-Tag, das für ein Banner verwendet wird, also setze ich es als Bild ein. Ich möchte jedoch etwas Text und Glyphicons innerhalb dieses div anzeigen. Ich habe versucht, ein Bootstrap Grid zu verwenden, um es auszulegen, aber ich kann nichts im div anzeigen. Ich habe versucht, einfach nur einen einfachen Text zu schreiben.Wie kann ich Text oder Bild in einem div mit einem Bild in seinem Inhalt anzeigen?

Was ist der richtige Weg, um so etwas zu tun?

Das habe ich ausprobiert. Das Bild erscheint, aber nichts vom Text.

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>

Quelle

2016-10-26 Caverman

@JacobGray, sollte der Text nicht zeigen, weil die 'content' Eigenschaft den Inhalt ersetzt. Überprüfe meine Antwort. – Dekel

@Dekel Ich habe das komplett vermisst xD +1 –

@JacobGray ja, es ist ein heikles. Sie können meine Antwort verbessern, wenn Sie mögen;) – Dekel

Verwenden background-image insted content

Quelle

2016-10-26 18:15:16 paolobasso

Die Eigenschaft content ersetzt den Inhalt des Elements. Statt - können Sie die :before Pseudo-Klasse (oder wechseln 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>

Quelle

2016-10-26 18:15:09 Dekel

Anstelle der CSS-Eigenschaft Inhalt, verwenden Sie die Eigenschaftshintergrund mögen:

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

Quelle

2016-10-26 18:21:32 dWinterDev

Diese Antwort existiert bereits, es besteht keine Notwendigkeit für eine Duplizierung. – Dekel

content lässt standardmäßig nicht zu, dass Text darüber platziert wird. Sie müssten mehr CSS hinzufügen. Bitte ändern Inhalt background-image

.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>

Quelle

2016-10-26 18:45:15 wuno

Wie kann ich Text oder Bild in einem div mit einem Bild in seinem Inhalt anzeigen?

Antwort

Verwandte Themen