Wie kann ich einen großen verblassten Texthintergrund über CSS hinzufügen?

Ich bin auf der Suche nach einem übergroßen Titel Zune/Microsoft-Stil in CSS, so dass ein Div einen halbtransparenten Text dahinter hat.Wie kann ich einen großen verblassten Texthintergrund über CSS hinzufügen?

example

Irgendwelche Ideen? Ich hoffe, es auf Plugins und Bildern so unnachgiebig wie möglich zu halten - aber es ist wichtig, dass der Text (unsichtbar) überläuft, und dass er geändert werden kann (wahrscheinlich durch JS). Es muss leicht überlaufen können, ohne außerhalb des div zu erscheinen; Das heißt, beachten Sie die Unterseite der "Text" Buchstaben; Dies entspricht der Einstellung bottom: -5px; in CSS.

Das ist, was ich unter Berücksichtigung

#about_big { 
    font-family: "Proxima Light", sans-serif; 
    font-size: 2000%; 
    color: rgba(100, 100, 100, .5); 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
}

... innerhalb eines about div, die auch overflow: hidden; ist aber ... Ach. Es versteckt sich nicht.

Danke!

Quelle

2013-04-13 j6m8

http://jsfiddle.net/znuXs/? – monkeyinsight

Ich verstehe, dass eine Antwort bereits für Ihre Frage akzeptiert wurde, aber ich dachte, ich könnte meine zwei Cent, nur der Vollständigkeit halber.

Während es kein inhärentes Problem gibt, ein zusätzliches <div> Element zu erstellen, um den Text aufzunehmen, verwende ich lieber das ::after Pseudo-Element, um eins zu erstellen. Es ist wahrscheinlich (IMHO) mehr semantisch korrekt, aber es hängt wirklich davon ab, welchen Zweck Sie den Text als dienen möchten.

In meinem Beispiel habe ich den Text, den Sie im Hintergrund in einem HTML-Daten- Attribut angezeigt werden soll platziert, sagen wir, data-bg-text:

<div class="bg-text" data-bg-text="text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus. 
</div>

Und für Ihre CSS, Sie einfach eine Pseudo erstellen müssen -elementigen und weisen Sie Inhalte aus dem benutzerdefinierten HTML-Daten- Attribute:

.bg-text { 
    background-color: #aaa; 
    overflow: hidden; 
    padding: 20px 20px 100px 20px; 
    position: relative; 
    width: 400px; 
} 
.bg-text::after { 
    color: #fff; 
    content: attr(data-bg-text); 
    display: block; 
    font-size: 80px; 
    line-height: 1; 
    position: absolute; 
    bottom: -15px; 
    right: 10px; 
}

die Geige Siehe hier - http://jsfiddle.net/teddyrised/n58D9/ oder überprüfen Sie das Proof-of-concept-Beispiel unten:

.bg-text { 
 
    background-color: #aaa; 
 
    padding: 20px 20px 100px 20px; 
 
    position: relative; 
 
    width: 400px; 
 
    overflow: hidden; 
 
} 
 
.bg-text::after { 
 
    color: #000; 
 
    content: attr(data-bg-text); 
 
    display: block; 
 
    font-size: 80px; 
 
    line-height: 1; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    right: 10px; 
 
}

<div class="bg-text" data-bg-text="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.</div>

Quelle

2013-04-13 23:20:51 Terry

Fantastisch nützlich, vielen Dank! EDIT: Meine einzige Beschwerde ist, dass es nicht den Text an der Unterseite des div abgeschnitten; wahrscheinlich leicht zu reparieren, obwohl ich zufällig nicht weiß, wie in diesem Beispiel. – j6m8

@ j6m8 Ah, ich habe es vergessen. Fügen Sie einfach 'overflow: hidden' zum übergeordneten Element hinzu. Auch die Geige wurde überarbeitet. – Terry

Perfekt, danke eine Million! – j6m8

ist die komplette Lsg:

<!doctype html> 
<html> 
<head> 
<title>Text Background</title> 
<style> 
body { 
    background-color: #eee; 
} 
.container { 
    position: relative; 
    background-color: #ccc; 
    z-index: -2; 
    height: 25pt; 
    width: 160pt; 
    overflow: hidden; 
} 
.background-text { 
    color: white; 
    font-size: 20pt; 
    position: absolute; 
    z-index: -1; 
    bottom: -8pt; 
    right: 0; 
} 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="content"> 
    Lorem ipsum dolor. 
    </div> 
    <div class="background-text">Background</div> 
</div> 

</body> 
</html>

Quelle

2013-04-13 09:30:07 allyourcode

Es tut mir leid, ich denke, ich war etwas unspezifisch, wenn es um Überlauf ging - das funktioniert großartig, solange das Bild die gleiche Farbe wie der Hintergrund hat und nicht überläuft, aber ich bin mir nicht sicher, dass das der Fall ist. Ich habe meine Frage bearbeitet, um zu reflektieren, dass der Hintergrundtext überläuft und unsichtbar bleiben muss. – j6m8

Aktualisiert meine Lösung. Es ging nur darum, '.container'' overflow: hidden' hinzuzufügen. Die andere kleine Änderung besteht darin, dass ich den Hintergrundtext nach unten verschoben habe (um zu demonstrieren, wie der Überlauf aussieht) und dem Körper eine Hintergrundfarbe hinzugefügt habe, damit klar ist, dass der Überlauf wie gewünscht funktioniert. – allyourcode

Fantastisch, vielen Dank !! – j6m8

Sie auf div mit einem anderen DEMO überlappen meine Lösung http://jsfiddle.net/FkE2V/

#container { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
#text, #other { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#other { 
    z-index: 10; 
    color:#f00; 
}

Quelle

2013-04-13 09:38:34 Vector

hier. Vorschau in jsfiddle

.about_box { 
 
    z-index: 5; 
 
    width: 728px; 
 
    height: 400px; 
 
    position: relative; 
 
    background: #0099ae; 
 
    overflow: hidden; 
 
} 
 

 
#about_small { 
 
    z-index: 7; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    color: #f7f7f7; 
 
    padding: 20px; 
 
} 
 

 
#about_big { 
 
    z-index: 6; 
 
    font-family: Arial; 
 
    font-size: 120px; 
 
    color: rgba(255, 255, 255, 0.5); 
 
    overflow: hidden; 
 
    padding: 0; 
 
    margin: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
}

<div class="about_box"> 
 

 
    <div id="about_small"> 
 
    "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog" 
 
    </div> 
 
    <div id="about_big"> 
 
    text 
 
    </div> 
 

 
</div>

Sie könnten mit line-height oder machen bottom negativ in #about_big experimentieren wollen den Hintergrund Text rechts unten zu bekommen.

Quelle

2013-04-13 09:45:34 sampoh

Wie kann ich einen großen verblassten Texthintergrund über CSS hinzufügen?

Antwort

Verwandte Themen