2527 Stimmen

Stijn Sanders avatar

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

Gefragt el 30 de April, 2009
Wann wurde die Frage gestellt
1561641 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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.

Gefragt el 30 de April, 2009 von Stijn Sanders

21 Stimmen

Avatar von meandmycode

Leider nicht, CSS3 zielt darauf ab, dies mit dem neuen Farbmodul zu beheben, es würde Ihnen erlauben, einen Alpha-Wert anzugeben, wenn Sie eine Farbe angeben. w3.org/TR/css3-color

Kommentiert el 30 de April, 2009 von meandmycode

77 Stimmen

Avatar von chharvey

Eigentlich ist die Deckkraft der untergeordneten Elemente multipliziert durch die Deckkraft des übergeordneten Elements, nicht außer Kraft gesetzt. Wenn also zum Beispiel das p Die Opazität von .6 und die span Die Opazität von .5 dann wäre die tatsächliche Deckkraft des Textes im Bereich 0.3 .

Kommentiert el 3 de Januar, 2012 von chharvey

0 Stimmen

Avatar von pablofiumara

Ist dieses Live-Beispiel das, was wir mit dieser Antwort erreicht haben? codepen.io/pablofiumara/pen/EIFaH

Kommentiert el 17 de November, 2013 von pablofiumara
Anzeigen 4 weitere Kommentare

Antworten

Zu viele Anzeigen?

18voto

Nicht registrierter Benutzer avatar
Nicht registrierter Benutzer Punkte 0

So gehe ich vor (es ist vielleicht nicht optimal, aber es funktioniert):

Erstellen Sie die div die halbtransparent sein soll. Geben Sie ihm eine Klasse/Id. Belassen Sie es leer und schließen Sie es. Geben Sie ihm eine bestimmte Höhe und Breite (z. B. 300 x 300 Pixel). Geben Sie ihm eine Deckkraft von 0,5 oder wie immer Sie wollen, und eine Hintergrundfarbe.

Dann, direkt unter dieses div, ein anderes div mit einer anderen Klasse/ID erstellen. Erstellen Sie darin einen Absatz, in den Sie Ihren Text einfügen. Geben Sie dem div Position: relativ, und oben: -295px (das ist negativ 295 Pixel). Geben Sie ihm einen z-Index von 2 und stellen Sie sicher, dass seine Deckkraft 1 ist. Gestalten Sie Ihren Absatz nach Belieben, aber stellen Sie sicher, dass die Abmessungen kleiner sind als die des ersten div damit er nicht überläuft.

Das war's. 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>

Dies funktioniert in Safari 2.x, aber ich weiß nicht, wie es mit dem Internet Explorer aussieht.

Beantwortet el 5 de August, 2009 von Nicht registrierter Benutzer (0 Punkte )

14voto

Suraj Rawat avatar
Suraj Rawat Punkte 3479

Wenn Sie ein Photoshop Kerl, können Sie auch verwenden:

 #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**
}
Beantwortet el 7 de August, 2014 von Suraj Rawat (3479 Punkte )

14voto

joren avatar
joren Punkte 1105

Hier ist ein jQuery-Plugin, das alles für Sie erledigt: Transify ( Transify - ein jQuery-Plugin zur einfachen Anwendung von Transparenz/Deckkraft auf den Hintergrund eines Elements ).

Da ich immer wieder auf dieses Problem stieß, beschloss ich, etwas zu schreiben, das mir das Leben leichter machen würde. Das Skript ist weniger als 2 KB groß und erfordert nur eine Zeile Code, um es zum Laufen zu bringen, und es kann auch die Deckkraft des Hintergrunds animieren, wenn Sie möchten.

Beantwortet el 25 de Oktober, 2010 von joren (1105 Punkte )

13voto

philnash avatar
philnash Punkte 63011

Vor einiger Zeit schrieb ich darüber in Browserübergreifende Hintergrundtransparenz mit CSS .

Bizarrerweise erlaubt es Internet Explorer 6, den Hintergrund transparent zu machen und den Text darüber völlig undurchsichtig zu lassen. Bei den anderen Browsern empfehle ich eine transparente PNG-Datei zu verwenden.

Beantwortet el 30 de April, 2009 von philnash (63011 Punkte )

11voto

fearoffours avatar
fearoffours Punkte 1415

Deckkraft des Hintergrunds, aber nicht des Textes hat einige Ideen. Entweder Sie verwenden ein halbtransparentes Bild oder Sie überlagern ein zusätzliches Element.

Beantwortet el 30 de April, 2009 von fearoffours (1415 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X