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

CSS 3 bietet eine einfache Lösung für Ihr Problem. Verwenden:

background-color:rgba(0, 255, 0, 0.5);

Hier, rgba steht für den Rot-, Grün-, Blau- und Alphawert. Der Grünwert wird durch den Wert 255 und die halbe Transparenz durch einen Alphawert von 0,5 erreicht.

Answer 2

Um den Hintergrund eines Elements halbtransparent zu machen, aber den Inhalt (Text und Bilder) des Elements undurchsichtig zu halten, müssen Sie CSS-Code für dieses Bild schreiben und ein Attribut namens opacity mit Mindestwert.

Zum Beispiel,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// Je kleiner der Wert, desto transparenter ist er, je kleiner der Wert, desto transparenter ist er.

Answer 3

Hintergrundfarbe: rgba(255, 0, 0, 0.5); ist, wie oben erwähnt, die beste Antwort, um es einfach auszudrücken. Zu sagen, verwenden CSS 3, auch im Jahr 2013, ist nicht einfach, weil das Niveau der Unterstützung von verschiedenen Browsern ändert sich mit jeder Iteration.

Während background-color von allen wichtigen Browsern unterstützt wird (nicht neu in CSS 3) [1], kann die Alpha-Transparenz problematisch sein, insbesondere beim Internet Explorer vor Version 9 und bei der Rahmenfarbe in Safari vor Version 5.1. [2]

Mit etwas wie Kompass o SASS kann die Produktion und die plattformübergreifende Kompatibilität deutlich verbessern.

---

[1] W3Schools: CSS background-color Eigenschaft

[2] Normans Blog: Browser-Unterstützungs-Checkliste CSS3 (Oktober 2012)

Answer 4

Wenn Sie Folgendes verwenden Weniger können Sie verwenden fade(color, 30%) .

Answer 5

Sie können reine CSS 3 : rgba(red, green, blue, alpha) , wobei alpha ist der Grad der gewünschten Transparenz. Es ist kein JavaScript oder jQuery erforderlich.

Hier ist ein Beispiel:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}