Grundlegendes CSS - Überlagern eines DIV mit einem halbtransparenten DIV darüber

75

Ich habe Probleme, dieses Rendering in meinem Browser (Chrome) richtig zu machen. Ich habe einen Wrapper, der alle Elemente des HTML-Codes enthält, und ich möchte einen DIV (nennen wir ihn div-1), der ein Bild enthält, und einen Overlay-Div darüber links, wie ich hier skizziert habe Bild ... irgendwelche schnellen Lösungen?

div bg mit Overlay halbtransparent div

css html

— TM23
quelle

152

Hier ist eine reine CSS-Lösung, ähnlich der Antwort von DarkBee, jedoch ohne zusätzliche .wrapperDiv:

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

Ich verwende hier rgba, aber Sie können natürlich auch andere Transparenzmethoden verwenden, wenn Sie möchten.

— Marcvangend
quelle

@marcvangend die Lösung funktioniert, aber wenn es anstelle des Bildes ein scrollbares Div gibt, können wir trotzdem zulassen, dass das Scrollen funktioniert?

— Onkar

2

@Onkar Sie können versuchen pointer-events: none;, dem .dimmed:afterSelektor etwas hinzuzufügen . Siehe auch stackoverflow.com/questions/1009753/… . Bitte lassen Sie uns wissen, ob es in diesem speziellen Anwendungsfall funktioniert.

— Marcvangend

4

Fantastisch. Wenn Sie sich zum zugrunde liegenden Element durchklicken möchten, fügen Sie die Regelzeigerereignisse hinzu: none; zu den After-Element-CSS-Regeln

— Adam Diament

25

Mit CSS3 müssen Sie mit der Transparenz kein eigenes Bild erstellen.

Haben Sie einfach ein div mit dem folgenden

position:absolute;
left:0;
background: rgba(255,255,255,.5);

Der letzte Parameter im Hintergrund (.5) ist die Transparenzstufe (eine höhere Zahl ist undurchsichtiger).

Beispiel Geige

— General_Twyckenham
quelle

16

.foo {
   position : relative;
}
.foo .wrapper {
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;
}

<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>

— DarkBee
quelle

1

Vielleicht möchten Sie top:0; left: 0;die.wrapper

— Collin Henderson

Das ist richtig. Geändert

— DarkBee

1

Auch wenn das Bild noch nicht transparent ist,opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */

— Echolocation

1

PS - ist die Verwendung von rgba nicht ratsam, ich sehe, Sie haben sich für transparentes PNG entschieden ... das liegt am Internet Explorer, oder?

— TM23

Ja, um ältere Browser zu unterstützen, die CSS3 nicht verarbeiten können

— DarkBee

10

Für ein div-Element können Sie die Deckkraft einfach über eine Klasse festlegen, um den Effekt zu aktivieren oder zu deaktivieren.

.mute-all {
   opacity: 0.4;
}

— Andreas Krohn
quelle

5

Wie die vorherige Antwort, aber ich würde :: vorher setzen, nur zum Stapeln. Wenn Sie Text über das Overlay einfügen möchten (ein häufiger Anwendungsfall), sollte dies durch die Verwendung von :: before behoben werden.

.dimmed {
  position: relative;
}

.dimmed:before {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

— Pat Cheung
quelle