CSS Hintergrund Opazität

Question

ich verwende etwas ähnlich dem folgenden Code:

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

ich dies erwartet den Hintergrund zu machen haben eine Opazität von 0,4 und den Text 100% Opazität zu haben. Stattdessen haben beide eine Opazität von 0,4.

Answer 1

Kinder erben Deckkraft. Es wäre seltsam und unbequem, wenn sie es nicht taten.

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

Beispiel 50% verblasste schwarzen Hintergrund:

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

Answer 2

Dies ist, weil die innere div 100% der Opazität des div hat es in verschachtelt ist (das 40% Opazität aufweist).

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

könnten Sie zwei separate divs erstellen wie folgt:

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

gewünschten CSS Opazität gesetzt und andere Eigenschaften für hte Hintergrund und nutzen, um Stil der z-index-Eigenschaft (z-index) und die bContent div positionieren. Mit diesem können Sie das div-Overtop des Hintergrund-divs platzieren, ohne dass seine Opazität mucked ist.

---

Eine andere Option ist RGBa. Dadurch können Sie Ihre Divs verschachteln und trotzdem eine divspezifische Opazität erzielen.

---

Die letzte Option, um ein halb transparentes .png Bild der Farbe, die Sie in Ihrem gewünschten Bild-Editor der Wahl wollen einfach machen, stellen Sie die Hintergrund-Bild-Eigenschaft auf die URL des Bildes und dann gewann man‘ Ich muss mir Sorgen machen, dass ich mit der CSS herumfummle und die Fähigkeit und Organisation einer verschachtelten div-Struktur verliere.

Answer 3

Ich würde so etwas wie diese

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

CSS tun:

.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; 
} 

funktionieren soll. Dies setzt voraus, dass Sie ein semitransparentes Bild btw benötigen und keine Farbe (für die Sie einfach rgba verwenden sollten). Es wird auch vorausgesetzt, dass Sie die Opazität des Bildes nicht vorher in Photoshop ändern können.

Answer 4

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

<article> 
    Text. 
</article> 

Dann

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 einige CSS anwenden: http://codepen.io/anon/pen/avdsi

Hinweis: Möglicherweise müssen Sie die z-index Werte einzustellen.

Answer 5

Die folgenden Verfahren können verwendet werden, um Ihr Problem

1. CSS Aplha Transparenz-Methode (funktioniert nicht in IE 8)

   #div{background-color:rgba(255,0,0,0.5);} 
   

2. Verwenden Sie ein Transparent PNG-Bild zu lösen nach Ihren Wahl als Hintergrund.

3. Verwenden Sie das folgende CSS-Code-Snippet, um einen browserübergreifenden Alpha-transparenten Hintergrund zu erstellen. Hier ist ein Beispiel mit #000000 @ 0,4% Opazität

   .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 Einzelheiten zu dieser Technik finden Sie this, die einen Online-CSS-Generator hat.

Answer 6

.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)";} 

Answer 7

können Sie verwenden sass transparentize, ich fand es die nützlichste und klar zu bedienen.

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) 

Weiteres: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

Answer 8

So stellen Sie sicher mit dem Hintergrund das gleiches für den Vordergrund Breite und Höhe zu setzen, oder versuchen, oben, unten zu haben, links und rechts Eigenschaften.

<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>