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

Antworten:

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