Michael: css opacity, nur in einem Bereich

Ich habe ein Problem mit dem opacity bei CSS Ich würde gerne den Hintergrund transparent machen (erstes DIV), aber das zweite DIV, mit der Schrift normal, bzw. mit schwarzen vollen Hintergrund.

<div style="background:#ff0000; padding:50px 0 50px 0; opacity: 0.4;">
<div style="background:#000;">TEST</div>
</div>

Ich habe schn versucht einfach in das zweite DIV den Wert opacity auf 1 zu setzen, aber ohne Wirkung.

  1. Herzlich willkommen bei SELFhtml.

    <div style="background:#ff0000; padding:50px 0 50px 0; opacity: 0.4;">
    <div style="background:#000;">TEST</div>
    </div>
    

    Ich habe schn versucht einfach in das zweite DIV den Wert opacity auf 1 zu setzen, aber ohne Wirkung.

    Ja das vererbt sich immer auf die Kindelemente:

    Nimm entweder rgba-Farben für das erste div oder positioniere das zweite absolut (aber nicht als Kinelemenent); was aber auch nicht ohne weiteres zu empfehlen ist.

    Herzliche Grüße

    Matthias Scharwies

    --
    "I don’t make typos. I make new words."
  2. Hallo,

    Ich würde gerne den Hintergrund transparent machen (erstes DIV), aber das zweite DIV, mit der Schrift normal, bzw. mit schwarzen vollen Hintergrund.

    <div style="background:#ff0000; padding:50px 0 50px 0; opacity: 0.4;">
    <div style="background:#000;">TEST</div>
    </div>
    

    das wird nicht gehen, weil opacity immer auf den Inhalt eines Elements einschließlich aller Kindelemente wirkt. Eine weitere opacity-Angabe für das Kindelement multipliziert sich mit dem Wert des Elternelements.

    Und bevor du jetzt auf die Idee kommst, dem Kindelement opacity:2.5 zu geben: Auch das wird nichts, denn der Wert der opacity-Eigenschaft darf nur zwischen 0 und 1 (je einschließlich) liegen.

    Ich habe schn versucht einfach in das zweite DIV den Wert opacity auf 1 zu setzen, aber ohne Wirkung.

    Denn 1.0 heißt nur: 100% von dem, was man vom Elternelement vererbet bekommt.

    Ciao,
     Martin

    --
    Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
  3. Hallo Michael,

    Ich habe schn versucht einfach in das zweite DIV den Wert opacity auf 1 zu setzen, aber ohne Wirkung.

    Du kannst mit teiltransparenten Hintergrundfarben arbeiten (Codepen).

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
    1. Super, danke.

      ich habe es so gelöst.

      Ich hatte gedacht, man setzte den Wert einfach wieder zurück ;-)

  4. Hallo Michael,

    das erste div ist per Default ohnehin transparent - warum musst Du es unbedingt selbst transparent machen?

    opacity ist für transparente Hintergründe ohnehin nicht das richtige Mittel, es betrifft das komplette Element (Rahmen, Text und Hintergrund). Willst Du das?

    Einen volltransparenten Hintergrund erreicht man mit background-color: transparent. Oder man verwendet, wie Matthias schrieb, eine Hintergrundfarbe mit Alpha-Anteil (=Transparenz), das gelingt durch Verwendung der CSS Funktion rgba oder durch eine Hash-Farbangabe mit 4 Werten. Ein Alpha von 0 ist volltransparent, ein Alpha von 1 (oder ff in der Hash-Angabe) ist voll deckend.

    <div style="background-color:transparent">sfsdf</div>
    <div style="background-color:rgba(255, 0, 0, 0.5)">sfsdf</div>
    <div style="background-color:#ff000080">sfsdf</div>
    

    Rolf

    --
    sumpsi - posui - clusi
    1. @@Rolf B

      Verwendung der CSS Funktion rgba oder durch eine Hash-Farbangabe mit 4 Werten.

      Browser, die #ff000080 verstehen, sollten auch rgb(255 0 0 / 0.5) verstehen – ohne a und Komma. (CSS Color Level 4)


      rgba() ist in Level 4 ein Alias für rgb(). (rgba(102 51 153) ist also eine gültige Farbangabe.)

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann