Text auf einem Hintergrundbild in einem Container

Ich möchte eine ansprechende IMG mit Text an der Spitze. Ich habe verschiedene Wege ausprobiert und komme mit einer Menge Knacksern dort hin, wenn ich versuche, es reaktionsfähig zu machen, also schätze ich es, wenn jemand eine einfache Lösung hat.Text auf einem Hintergrundbild in einem Container

JSFiddle

-Code-Schnipsel Demonstration:

.img-fluid { 
 
    max-width: 100%; 
 
    height: auto; 
 
    opacity: 0.4; 
 
}

<div class="container"> 
 
    <img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid"> 
 
    <div class="container"> 
 
    <h1>Header</h1> 
 
    </div> 
 
</div>

Quelle

2017-12-16 born2gamble

Sie das bedeuten? https://jsfiddle.net/svqtk4rz/ –

Ja, danke. Muss ich Medienabfragen verwenden, damit der Text auch reagiert? – born2gamble

Posted die Lösung dafür. –

Versuchen Sie, position zu absolute oder fixed

.img-fluid{ 
    max-width:100%; 
    height:auto; 
    opacity:0.4; 
    position: absolute; 
}

Quelle

2017-12-16 08:42:42

Sie können dies versuchen, hier ist der Code

<html> 
<head> 
<style> 
.container { 
    position: relative; 
    text-align: center; 
    color: white; 
} 

.centered { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
</style> 
</head> 
<body> 

<h2>Image Text within container</h2> 

<div class="container"> 
    <img src="abc.jpg" alt="abc" style="width:100%;"> 
    <div class="centered">Centered</div> 
</div> 

</body>

Quelle

2017-12-16 08:48:49 Rutvij07

Funktioniert auch perfekt, danke. Ich kann anscheinend keine Klasse finden, um den Text ansprechbar zu machen. Gibt es eine oder muss ich Medienabfragen verwenden, um im Bootstrap reaktionsfähigen Text zu erstellen? – born2gamble

Sie können versuchen, Medienabfragen zu verwenden. Es gibt definitiv geben Sie Ausgabe – Rutvij07

für ein Bild verwenden, das Konzept:

{ 
    display: table; 
    position: relative; 
    width: 100%; 
    height: auto; 
}

für Text auf Bild Verwendung anzuzeigen das Konzept

und passen Sie den Text auf Bild geben oben oder unten oder links oder rechts} Verwenden Sie die Klasse img-responsive, um nicht die Breite und Höhe des Bildes in allen Ansichten zu ändern.

Quelle

2017-12-16 08:58:53

Ändern Sie 'verticl-align' zu' vertical-align' und setzen Sie 'img' oder' img p' vor dem '{'. –

Markieren Sie die Antwort, die Ihre Anfrage als akzeptiert gelöst hat. –

HTML: 

<div class="banner"> 
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star"> 
<h2>This is a Star</h2> 
</div> 

CSS: 

.banner img{position:relative; width:100%; height:auto;} 
.banner h2{[psition:absolute; left:50%; top:50%; font-size:30px; 
line-height:30px;}

Quelle

2017-12-16 09:08:16

Sie können von font-size: calc(2vw + 2vh + 2vmin) (zwicken um die Werte, um Ihren Bedarf) machen, um Text in Bezug auf die Anzeigengröße als Reaktion zu machen :)

.container { 
 
    position: relative; 
 
} 
 

 
.container h1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 20px; 
 
    font-size: calc(2vw + 2vh + 2vmin); 
 
} 
 

 
.img-fluid { 
 
    max-width: 100%; 
 
    height: auto; 
 
    opacity: 0.4; 
 
}

<div class="container"> 
 
    <img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid"> 
 
    <h1>Header</h1> 
 
</div>

Quelle

2017-12-16 09:24:20

Text auf einem Hintergrundbild in einem Container

Antwort

Verwandte Themen