Wie gebe ich Text oder ein Bild mit einem transparenten Hintergrund mit CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ist es möglich, mit Hilfe von CSS, nur die background eines Elements halbtransparent zu machen, aber den Inhalt (Text & Bilder) hat das Elements undurchsichtig?
Ich möchte dies zu tun, ohne den Text und den Hintergrund als zwei getrennte Elemente aufweisen.
Beim Versuch:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>
Es sieht aus wie Kind-Elemente auf die Undurchsichtigkeit ihrer Eltern ausgesetzt sind, so opacity:1 ist zum opacity:0.6 des Mutter relativ.
Lösung
Verwenden Sie entweder eine halbtransparente PNG Bild oder Verwendung CSS3:
background-color:rgba(255,0,0,0.5);
Hier ist ein Artikel aus css3.info, Opazität, RGBA und kompromittieren (2007-06-03).
<p style="background-color:rgba(255,0,0,0.5);">
<span>Hello world</span>
</p>
Andere Tipps
In Firefox 3 und Safari 3, Sie RGBA wie Georg Schölly erwähnt .
Ein wenig bekannter Trick ist, dass Sie es in Internet Explorer die Gradienten-Filter auch verwenden können.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Die erste Hexadezimalzahl definiert den Alpha-Wert der Farbe.
Voll Lösung alle Browser:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Dies ist von CSS Hintergrund Transparenz ohne Kind-Elemente zu beeinflussen, durch RGBa und Filter .
Screenshots Nachweis der Ergebnisse:
Dies ist, wenn mit dem folgenden Code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
Dies ist die beste Lösung, die ich tun konnte, nicht mit CSS 3. Und es funktioniert auf Firefox, Chrome und Internet Explorer, soweit ich sehen kann.
Setzen Sie einen Container DIV und zwei Kind DIVs in der gleichen Ebene, ein für Inhalt, einen für den Hintergrund. Und mit Hilfe von CSS, Auto-Größe, um den Hintergrund, den Inhalt passen und den Hintergrund tatsächlich in der Rückseite mit z-index.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>
Für eine einfache halbtransparenten Hintergrundfarbe, die oben genannten Lösungen (CSS3 oder bg Bilder) sind die besten Optionen. Allerdings, wenn Sie wollen etwas schicker (zum Beispiel Animation, mehr Hintergründe, etc.) zu tun, oder wenn Sie nicht auf CSS3 verlassen mögen, können Sie versuchen, die „pane-Technik“:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
Die Technik funktioniert durch die Verwendung von zwei „Schichten“ innerhalb des äußeren Scheibenelementes:
- eine (die „Rückseite“), die die Größe des Scheibenelementes paßt, ohne den Fluss von Inhalt zu beeinflussen,
- und eine (die „cont“), die den Inhalt enthält, und die Größe der Scheibe bestimmen können.
Die position: relative auf Scheibe ist wichtig; es sagt Rückschicht auf die Scheibe der Größe zu passen. (Wenn Sie den <p> Tag müssen absolut sein, ändern Sie die Scheibe von einem <p> zu einem <span> und wickelt, dass alle in einem absolut-Position <p>-Tag.)
Der Hauptvorteil dieser Technik über ähnliche hat oben aufgeführt ist, dass die Scheibe nicht eine bestimmte Größe sein muss; wie oben kodiert, wird es mit voller Breite (normal Blockelement-Layout), und nur so hoch ist wie der Inhalt passen. Die äußere Scheibe Element kann beliebig dimensioniert sein, und bitte Sie, solange es rechteckig ist (das heißt Inline-Block arbeiten; plain-alt Inline nicht).
Auch es gibt Ihnen viel Freiheit für den Hintergrund; Sie sind frei, wirklich etwas in den Rücken Element zu setzen und haben es nicht den Fluss von Inhalt beeinflussen (wenn Sie mehrere Full-Size-Unterschichten wollen, so stellen Sie sicher, dass sie auch Position haben: absolute, Breite / Höhe: 100%, und oben / unten / links / rechts. auto)
Eine Variation Hintergrund Inset Einstellung zu ermöglichen (über oben / unten / links / rechts) und / oder Hintergrund Pinning (über eine der links / rechts oder oben / unten Paare zu entfernen), das Folgendes CSS zu verwenden, anstatt:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Wie schon geschrieben, das funktioniert in Firefox, Safari, Chrome, IE8 + und Opera, obwohl IE7 und IE6 erfordern zusätzliche CSS und Ausdrücke, IIRC, und das letzte Mal habe ich geprüft, die zweite CSS Variation in Opera funktioniert nicht.
Reise aufpassen:
- Schwimm Elemente innerhalb der cont Schicht nicht enthalten sein. Sie werden sicherstellen müssen, dass sie gelöscht werden oder aus sonstigen Gründen, oder sie werden aus dem Boden rutschen.
- Die Margen auf dem Scheibenelement gehen und Polsterung geht auf die Fortsetzung Element. Sie nicht das Gegenteil (Ränder auf der cont oder Polsterung auf der Scheibe) verwenden, oder Sie werden Merkwürdigkeiten entdecken wie die Seite immer etwas breiter als das Browserfenster zu sein.
- Wie bereits erwähnt, muss das Ganze Block- oder Inline-Block sein. Fühlen Sie sich frei
<div>s statt<span>s zu verwenden, um Ihre CSS zu vereinfachen.
Eine vollständigere Demo vorführt die flexiblity dieser Technik, indem sie es im Tandem mit display: inline-block verwenden und mit dem beide auto & spezifischem widths / min-heights:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
Und hier ist ein leben Demo der Technik umfangreich verwendet werden:
Es ist besser, eine halbtransparente .png zu verwenden .
Öffnen Sie einfach Photoshop , ein 2x2 Pixelbild erstellen (picking kann ein Internet Explorer-Fehler verursachen! ), füllen sie es mit einer grünen Farbe und die Deckkraft in "Layers Tab" zu 60%. dann speichern Sie es und machen es ein Hintergrundbild:
<p style="background: url(green.png);">any text</p>
Es funktioniert cool, natürlich, außer in schönen Internet Explorer 6 . Es gibt bessere Fixes zur Verfügung, aber hier ist eine schnelle Hack:
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
Es gibt einen Trick, um das Markup zu minimieren: Verwenden Sie ein Pseudo-Element als Hintergrund und Sie können die Deckkraft auf sie setzen, ohne das Hauptelement zu beeinflussen und seine Kinder:
Ausgabe:
Relevante Code:
p {
position: relative;
}
p:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .6;
z-index: -1;
}
/*** The following is just for demo styles ***/
body {
background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
background-size: cover;
}
p {
width: 50%;
padding: 1em;
margin: 10% auto;
font-family: arial, serif;
color: #000;
}
img {
display: block;
max-width: 90%;
margin: .6em auto;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>
Browserunterstützung ist Internet Explorer 8 und später.
Die einfachste Methode, ein halbtransparenten Hintergrund PNG-Bild zu verwenden wäre.
Sie können JavaScript verwenden, um es in Internet Explorer 6 zu machen arbeiten, wenn Sie müssen.
Ich verwende die Methode nach Transparent PNGs im Internet Explorer 6 .
Other than that,
Sie konnte fake it two side-by-side sibling elements mit - machen ein semi-transparent , dann absolutely position the other over the top
Mit dieser Methode können Sie im Hintergrund ein Bild haben und nicht nur eine Farbe, und kann verwendet werden, um Transparenz auf andere Attribute haben wie Grenzen. Keine transparenten PNG-Bilder erforderlich sind.
Mit :before (oder :after) in CSS und gibt ihnen den Durchlässigkeitswert das Element in seiner ursprünglichen Opazität zu verlassen. So können Sie: bevor ein faux Element zu machen und den transparenten Hintergrund geben (oder Grenzen), die Sie wollen, und es hinter dem Inhalt bewegen Sie mit z-index undurchsichtig bleiben sollen.
Ein Beispiel ( Geige ) (beachten Sie, dass die DIV mit Klasse dad ist nur etwas Kontext zu schaffen, und Kontrast zu den Farben, dieses zusätzliche Element ist eigentlich nicht erforderlich, und das rote Rechteck ist ein wenig nach unten und nach rechts zu verlassen sichtbar den Hintergrund hinter dem fancyBg Elemente bewegt):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
Mit dieser CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
In diesem Fall .fancyBg:before hat die CSS-Eigenschaften, die Sie mit Transparenz haben wollen (roten Hintergrund in diesem Beispiel aber kann ein Bild oder Grenzen sein). Es ist, als absolute positioniert hinter .fancyBg (Gebrauchswert von Null oder was auch immer besser geeignet für Ihre Bedürfnisse) zu bewegen.
Das Problem ist, dass der Text tatsächlich voll Opazität in Ihrem Beispiel HAS. Es hat die volle Opazität innerhalb des p Tages, aber der p-Tag ist nur halbtransparent.
Sie könnten ein halbtransparente PNG Hintergrundbild hinzufügen, anstatt es in CSS zu realisieren, oder separaten Text und div in 2 Elemente und den Text über den Kasten (zB negative Marge) bewegen.
Sonst wird es nicht möglich sein.
EDIT:
Genau wie Chris erwähnt: Wenn Sie eine PNG-Datei mit Transparenz zu verwenden, müssen Sie eine JavaScript-Abhilfe verwenden, um es in dem lästigen Internet Explorer funktioniert ...
Fast alle diese Antworten übernehmen die Designer eine Farbe Hintergrund will. Wenn der Designer tatsächlich ein Foto als Hintergrund die einzige wirkliche Lösung im Moment will, ist JavaScript wie die jQuery-Plugin Transify anderswo erwähnt.
Was wir tun müssen, ist die CSS-Arbeitsgruppe Diskussion einschalten und sie uns geben, ein Hintergrund-Opazität Attribut! Es sollte mit den vielen Hintergründe verfügen Hand in Hand arbeiten.
Hier ist, wie ich dies tun (es ist nicht optimal sein könnte, aber es funktioniert):
Erstellen Sie die div, die Sie semi-transparent sein wollen. Geben Sie ihm eine Klasse / id. Lassen Sie es leer, und schließen Sie es. Geben ihm eine festgelegte Höhe und Breite (sagen wir, 300 Pixel mal 300 Pixel). Geben Sie ihm eine Opazität von 0,5 oder was auch immer Sie mögen, und eine Hintergrundfarbe.
Dann direkt unter dieser div, erstellen Sie ein anderes div mit einer anderen Klasse / id. Erstellen Sie einen Absatz im Innern, wo Sie Ihren Text platzieren werden. Geben Sie die div position: relative und oben: -295px (das ist NEGATIVE 295 Pixel). Geben Sie ihm einen Z-Index von 2 für eine gute Maßnahme, und sicherstellen, dass ihre Opazität 1. Style Ihr Absatz ist, wie Sie möchten, aber stellen Sie sicher, dass die Abmessungen kleiner sind als die des ersten div so ist es nicht überläuft.
Das ist es. Hier ist der Code:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>
Das funktioniert in Safari 2.x, ich weiß nicht, über das Internet Explorer.
Hier ist eine jQuery-Plugin, das alles für Sie, Transify ( Transify - a. jQuery-Plugin, um leicht anwenden Transparenz / Opazität auf ein Hintergrund des Elements )
Ich war in dieses Problem laufen ab und zu, so habe ich beschlossen, etwas zu schreiben, die das Leben viel einfacher machen würde. Das Skript ist weniger als 2 KB und es erfordert nur 1 Zeile Code, um es zu arbeiten, und es wird übernehmen auch die Undurchsichtigkeit des Hintergrunds Animieren, wenn Sie möchten.
Undurchsichtigkeit des Hintergrunds, aber nicht der Text hat einige Ideen. Entweder ein halbtransparentes Bild, oder ein zusätzliches Element überlagern.
Eine Weile zurück, ich darüber schrieb in Cross-Browser-Hintergrund Transparenz Mit CSS .
Seltsamer Internet Explorer 6 ermöglicht es Ihnen, den Hintergrund transparent und halten Sie den Text auf völlig undurchsichtig zu machen. Für die anderen Browser schlage ich dann eine transparente PNG-Datei.
Wenn Sie ein Photoshop Typ sind, können Sie auch:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Oder:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Um undurchsichtigen den Hintergrund eines Elements halbtransparenten haben aber den Inhalt (Text & Bilder) des Elements zu machen. Sie müssen CSS-Code für das Bild schreiben, und Sie haben ein Attribut namens Opazität mit Minimalwert hinzuzufügen. z.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// weniger mehr der Wert der Transparenz sein wird, Erz den Wert kleiner wird die Transparenz sein.
background-color: rgba (255,0,0,0.5); , wie oben erwähnt ist die beste Antwort einfach auszudrücken. Um die Verwendung CSS3 zu sagen, auch im Jahr 2013, ist nicht einfach, weil die Höhe der Unterstützung von verschiedenen Browsern mit jeder Iteration ändert.
Während background-color von allen gängigen Browsern unterstützt wird (nicht neu zu CSS3) [1] die alpha Durchsichtigkeit kann schwierig sein, vor allem mit dem Internet Explorer vor Version 9 und mit Randfarbe auf Safari vor Version 5.1. [2]
etwas verwenden wie Compass oder SASS wirklich Produktion und Cross-Plattform-Kompatibilität helfen kann.
[1] W3Schools: CSS Eigenschaft background-color
[2] Norman Blog: Browserunterstützung Prüfliste CSS3 (Oktober 2012)
CSS3 hat eine einfache Lösung des Problems. Verwendung:
background-color:rgba(0,255,0,0.5);
Hier rgba steht für Rot, Grün, Blau und Alpha-Wert. Grün-Wert, weil von 255 erhalten wird, und die Hälfte der Transparenz wird durch 0,5-Alpha-Wert erhalten.
Wenn Sie mit Weniger , können Sie fade(color, 30%) verwenden.
Sie können diese für Internet Explorer 8 von (ab) mit der Steigung Syntax lösen. Das Farbformat ist ARGB. Wenn Sie die Sass Präprozessor verwenden, können Sie Farben mit Hilfe der eingebauten Funktion umwandeln "ie-hex-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
Sie können reine CSS 3 : rgba(red, green, blue, alpha), wo alpha das Niveau der Transparenz Sie wollen. Es besteht keine Notwendigkeit für JavaScript oder jQuery.
Hier ist ein Beispiel:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
Es gibt eine einfachere Lösung ein Overlay über ein Bild auf dem gleichen div zu setzen. Es ist nicht der richtige Einsatz dieses Werkzeugs. Aber funktioniert wie ein Zauber, den Overlay machen mit Hilfe von CSS.
Verwenden Sie einen Einsatz Schatten wie folgt aus:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Das ist alles:)
Sie können mit RGBA (red, green, blue, alpha) in der CSS , so etwas wie folgt aus:
So einfach so etwas wie das funktioniert in Ihrem Fall tun:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Sie können mit
rgba color codetun mit CSS wie in diesem Beispiel unten angegeben.
.imgbox img{
height:100px;
width:200px;
position:relative;
}
.overlay{
background:rgba(74, 19, 61, 0.4);
color:#fff;
text-shadow:0px 2px 5px #000079;
height:100px;
width:300px;
position:absolute;
top:10%;
left:25%;
padding:25px;
}<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
<div class="overlay">
<p>This is Simple Text.</p>
</div>
</div>
ich normalerweise diese Klasse für meine Arbeit verwenden. Es ist ziemlich gut.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
Wie pro meiner Sicht besten Weg, Hintergrundfarbe mit einer Undurchsichtigkeit zu verwenden, wenn wir diese nutzen, dann werden wir nicht Opazität für die anderen Elemente wie Test Farbe verlieren und Grenze etc ..
background-color: rgba(71,158,0,0.8);
Verwenden Sie Hintergrundfarbe mit einer Undurchsichtigkeit
Hintergrund-Farbe: RGBA (R, G, B, Opazität);
Sie können die RGB verwenden Farbe mit einer Undurchsichtigkeit wie dieser Farbcode in RGB (63,245,0) und fügen Sie Opazität wie (63,245,0,0.5) und fügen Sie auch RGBA RGB ersetzen. Eine Verwendung für Opazität
div{
background:rgba(63,245,0,0.5);
}
