Verwischen eines Abschnitts eines Bildes mit Bootstrap-Skalierbarkeit

Ich versuche, einen Teil des Bildes hinter dem Text, aber nicht den Text und nichts außerhalb der Box (Code unten) zu verwischen. Ich würde auch eine schnelle Erklärung zu schätzen wissen, wenn möglich, da ich versuche, es auch zu verstehen. Ich habe herumgespielt und bin nah dran.Verwischen eines Abschnitts eines Bildes mit Bootstrap-Skalierbarkeit

HTML:

<div class="banner"> 
    <div class="container-fluid text-center"> 
     <h1>Tex Text Text</h1> 
    </div> 
</div>

CSS:

.banner { 
    height:200px; 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-image:url('sun.jpg'); 
} 


.banner h1 { 
    color:white; 
    border: 3px solid white; 
    padding: 20px; 
    margin: 50px; 
}

Hier ist ein Bild von meinen aktuellen Bannern, von denen ich zu blau den Sonnenblumen will, aber über den Text auf die weiße Grenze.

enter image description here

Dank

Quelle

2016-07-09 Steedy

Versuchen Sie, einen Text vor einem img zu haben und den img zu verwischen? –

Ja, aber nur ein Teil des Bildes, das Bit, das hinter dem Text und der Textrahmen ist – Steedy

Bearbeitet, um Bild-Link für Klarheit hinzuzufügen – Steedy

Wie wäre es hier so etwas wie dieses Fiddle mit? (Gefunden auf dem Netz) http://jsfiddle.net/KodeError404/sE4Fv/723/

Auch wenn es nicht Bootstrap verwenden ist, aber man könnte sich anpassen und Ihren Text und die CSS anpassen Ihren Text in der <div>

passen Erinnern Sie die Breite ändern/Höhe, um Ihre gewünschte Höhe der Höhe/Breite zu sehen! (Jetzt ist es in% Bedeutung im Verhältnis)

Quelle

2016-07-09 15:22:54

Verwischen eines Abschnitts eines Bildes mit Bootstrap-Skalierbarkeit

Antwort

Verwandte Themen