it-swarm.com.de

CSS Hintergrund Deckkraft

Ich verwende einen ähnlichen Code wie den folgenden:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

Ich habe damit gerechnet, dass der Hintergrund eine Deckkraft von 0,4 und der Text eine Deckkraft von 100% hat. Stattdessen haben beide eine Deckkraft von 0,4.

619
John Wheal

Kinder erben Opazität. Es wäre seltsam und unbequem, wenn sie es nicht tun würden.

Sie können eine durchscheinende PNG-Datei für Ihr Hintergrundbild oder eine RGBa-Farbe (a für Alpha) für Ihre Hintergrundfarbe verwenden.

Beispiel, 50% ausgeblendeter schwarzer Hintergrund:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
1071
AlienWebguy

Sie können CSS 3 :before verwenden, um einen halbtransparenten Hintergrund zu erhalten, und dies können Sie mit nur einem Container tun. Verwenden Sie so etwas

<article>
  Text.
</article>

Dann wenden Sie etwas CSS an

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Beispiel: http://codepen.io/anon/pen/avdsi

Hinweis: Möglicherweise müssen Sie die Werte für z-index anpassen.

164
daniels

Die folgenden Methoden können verwendet werden, um Ihr Problem zu lösen:

  1. CSS-Alphatransparenzmethode (funktioniert in Internet Explorer 8 nicht):

    #div{background-color:rgba(255,0,0,0.5);}
    
  2. Verwenden Sie ein transparentes PNG-Bild Ihrer Wahl als Hintergrund.

  3. Verwenden Sie den folgenden CSS-Codeausschnitt, um einen browserübergreifenden, alphatransparenten Hintergrund zu erstellen. Hier ist ein Beispiel mit #000000 bei 0,4% Deckkraft

    .div {
        background:rgb(0,0,0);
        background: transparent\9;
        background:rgba(0,0,0,0.4);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
        zoom: 1;
    }
    .div:nth-child(n) {
        filter: none;
    }
    

Weitere Informationen zu dieser Technik finden Sie unter this , das über einen Online-CSS-Generator verfügt.

43
Achyuth Ajoy

Ich würde so etwas machen

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Es sollte funktionieren. Dies setzt voraus, dass Sie ein halbtransparentes Bild benötigen und keine Farbe (für die Sie einfach rgba verwenden sollten). Es wird auch davon ausgegangen, dass Sie die Deckkraft des Bildes nicht einfach vorher in Photoshop ändern können.

29
Peter Lada

Sie können Sass 'transparentize verwenden.

Ich fand es am nützlichsten und am einfachsten zu benutzen.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

Weitere Informationen: # transparentize ($ color, $ amount) ⇒ Sass :: Script :: Value :: Color

8
ilan weissberg
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
7
Wael Wafik

Dies liegt daran, dass das innere Div 100% der Deckkraft des Divs hat, in dem es verschachtelt ist (was 40% Deckkraft hat).

Um dies zu umgehen, gibt es ein paar Dinge, die Sie tun können.

Sie könnten zwei separate Divs wie folgt erstellen:

<div id="background"></div>
<div id="bContent"></div>

Stellen Sie die gewünschte CSS-Opazität und andere Eigenschaften für den Hintergrund ein und verwenden Sie die Z-Index-Eigenschaft ( Z-Index ), um das bContent-Div zu formatieren und zu positionieren. Mit dieser Option können Sie das Div-Oberteil des Hintergrund-Div platzieren, ohne die Deckkraft zu beeinträchtigen.


Eine andere Option ist RGBa . Auf diese Weise können Sie Ihre Divs verschachteln und dennoch eine div-spezifische Deckkraft erzielen.


Die letzte Option ist, einfach ein halbtransparentes .png-Bild der gewünschten Farbe in dem gewünschten Bildeditor zu erstellen, die Hintergrundbild-Eigenschaft auf die URL des Bildes zu setzen und sich dann keine Gedanken mehr über das Mucken zu machen mit dem CSS und die Fähigkeit und Organisation einer verschachtelten Div-Struktur zu verlieren.

3
zillaofthegods

Stellen Sie einfach sicher, dass Breite und Höhe für den Vordergrund mit dem Hintergrund identisch sind, oder versuchen Sie, Eigenschaften für oben, unten, links und rechts zu verwenden.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>