Wie kann ich einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben?

Question

Ist es möglich, nur mit CSS, um die background eines Elements halbtransparent sein, aber den Inhalt (Text und Bilder) des Elements undurchsichtig machen?

Ich möchte dies erreichen, ohne dass der Text und der Hintergrund zwei separate Elemente sind.

Beim Ausprobieren:

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 so aus, als ob untergeordnete Elemente der Deckkraft ihrer übergeordneten Elemente unterworfen sind, also opacity:1 ist relativ zum opacity:0.6 des Elternteils.

Answer 1

Es ist besser, ein halbtransparentes .png .

Einfach öffnen Photoshop erstellen Sie eine 2x2 Pixelbild ( . 1x1 kann einen Fehler im Internet Explorer verursachen! ), füllen Sie es mit grüner Farbe und stellen Sie die Deckkraft auf der Registerkarte "Ebenen" auf 60 %. Dann speichern Sie es und machen es zu einem Hintergrundbild:

<p style="background: url(green.png);">any text</p>

Das funktioniert natürlich prima, außer in schönen Internet Explorer 6 . Es gibt bessere Lösungen, aber hier ist ein schneller 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');
}

Answer 2

Die einfachste Methode wäre die Verwendung eines halbtransparenten Hintergrunds PNG-Bild .

Sie können JavaScript verwenden, um die Funktion in Internet Explorer 6 wenn Sie es müssen.

Ich verwende die Methode, die in Transparente PNGs in Internet Explorer 6 .

Andernfalls könnte man es mit zwei nebeneinander liegende geschwisterliche Elemente - machen ein halbtransparentes entonces den anderen unbedingt über den Kopf stellen .

Answer 3

Diese Methode ermöglicht es Ihnen, ein Bild im Hintergrund zu haben und nicht nur eine Volltonfarbe, und kann verwendet werden, um Transparenz auf andere Attribute wie Grenzen zu haben. Es sind keine transparenten PNG-Bilder erforderlich.

使用方法 :before (o :after ) in CSS und geben Sie ihnen den Opazitätswert, damit das Element seine ursprüngliche Opazität beibehält. So können Sie :before verwenden, um ein Fake-Element zu erstellen, ihm den gewünschten transparenten Hintergrund (oder Rahmen) zu geben und es hinter den Inhalt zu schieben, den Sie mit :before opak halten wollen. z-index .

Ein Beispiel ( fiddle ) (beachten Sie, dass die DIV mit Klasse dad dient nur dazu, einen Kontext und einen Kontrast zu den Farben zu schaffen. Dieses zusätzliche Element wird eigentlich nicht benötigt, und das rote Rechteck wird ein wenig nach unten und nach rechts verschoben, damit der Hintergrund hinter dem fancyBg Element):

<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 diesem 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 möchten (roter Hintergrund in diesem Beispiel, aber es kann ein Bild oder ein Rahmen sein). Es ist als absolut positioniert, um es hinter .fancyBg (verwenden Sie Werte von Null oder was auch immer für Ihre Bedürfnisse besser geeignet ist).

Answer 4

Das Problem ist, dass der Text eigentlich hat volle Deckkraft in Ihrem Beispiel. Es hat volle Deckkraft innerhalb der p Tag, aber die p Tag ist nur halbtransparent.

Sie könnten ein halbtransparentes PNG-Hintergrundbild hinzufügen, anstatt es in CSS zu realisieren, oder Text und div in zwei Elemente aufteilen und den Text über die Box verschieben (z. B. negativer Rand).

Andernfalls wird es nicht möglich sein.

Wie Chris bereits erwähnte: Wenn Sie eine PNG-Datei mit Transparenz verwenden, müssen Sie einen JavaScript-Workaround verwenden, damit sie im lästigen Internet Explorer funktioniert...

Answer 5

Fast alle diese Antworten gehen davon aus, dass der Designer einen einfarbigen Hintergrund wünscht. Wenn der Designer tatsächlich ein Foto als Hintergrund haben möchte, ist die einzige wirkliche Lösung im Moment JavaScript wie das jQuery Transify Plugin an anderer Stelle erwähnt .

Wir müssen uns der Diskussion in der CSS-Arbeitsgruppe anschließen und sie dazu bringen, uns ein Attribut für die Hintergrund-Deckkraft zu geben! Es sollte Hand in Hand mit der Funktion "Mehrere Hintergründe" arbeiten.