Wie setze ich die Deckkraft im Eltern-Div und nicht im Child-Div?

Question

Hey ich in google bin auf der Suche, aber ich

jede perfekte Antwort nicht fein kann

ich in Mutter DIV Undurchsichtigkeit wollen aber nicht Child DIV

Beispiel

HTML

<div class="parent"> 
<div class="child"> 
Hello I am child 
</div> 
</div> 

Css

.parent{ 
background:url('../images/madu.jpg') no-repeat 0 0; 
} 
.child{ 
Color:black; 
} 

Hinweis: - Ich möchte background-image in Parent Div nicht

Answer 1

Vielleicht ist es gut, wenn Sie Ihr Hintergrundbild in der :after Pseudoklasse definieren.Schreiben wie folgt aus:

.parent{ 
    width:300px; 
    height:300px; 
    position:relative; 
    border:1px solid red; 
} 
.parent:after{ 
    content:''; 
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image'); 
    width:300px; 
    height:300px; 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0.5; 
} 
.child{ 
    background:yellow; 
    position:relative; 
    z-index:1; 
} 

prüfen diese fiddle

Answer 2

Sie nicht können Farbe. Das erlaubt Css heute einfach nicht.

die logische Rendering-Modell ist diese:

Wenn das Objekt ein Behälterelement ist, dann ist die Wirkung, als ob der Inhalt des Behälterelements gegen den Strom Hintergrund gemischt wurden unter Verwendung einer Maske in dem der Wert von jedem Pixel der Maske ist.

Referenz: css transparency

Die Lösung ist eine andere Elementzusammensetzung zu verwenden, in der Regel feste oder berechnete Positionen für die Verwendung, was heute als Kind definiert: es als Kind logisch und visualy für den Benutzer angezeigt aber das Element muss nicht wirklich ein Kind in Ihrem Code sein.

Eine Lösung mit CSS: fiddle

.parent { 
    width:500px; 
    height:200px;  
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg'); 
    opacity: 0.2; 
} 
.child { 
    position: fixed; 
    top:0; 
} 

Eine andere Lösung mit javascript: fiddle

Answer 3

Sie können nicht tun, es sei denn, Sie nehmen das Kind aus dem Mutter und legen Sie es über Positionierung.

Die einzige Möglichkeit, die ich weiß und es funktioniert, ist verwenden Sie eine translucid Bild (. Png mit Transparenz) für den Hintergrund der Eltern. Der einzige Nachteil ist, dass Sie die Deckkraft nicht über CSS kontrollieren können, außer dass es funktioniert!

Answer 4

Sie kann es tun mit Pseudo-Elemente: (demo on dabblet.com)

Markup:

<div class="parent"> 
    <div class="child"> Hello I am child </div> 
</div> 

css:

.parent{ 
    position: relative; 
} 

.parent:before { 
    z-index: -1; 
    content: ''; 
    position: absolute; 

    opacity: 0.2; 
    width: 400px; 
    height: 200px; 
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 
} 

.child{ 
    Color:black; 
} 

Answer 5

Ich weiß, das ist alt, aber nur für den Fall wird es jemand anderes helfen.

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

Wo rgba ist: rot, grün, blau und a ist für Transparenz.

Answer 6

Ich hatte das gleiche Problem und ich reparierte, indem ich transparentes png Bild als Hintergrund für das Elternteilumbau einstelle.

This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background!

Answer 7

Wie von Tom erwähnt, kann background-color: rgba(229,229,229, 0.85) den Trick tun. Platzieren Sie das auf dem Stil des übergeordneten Elements und Kind wird nicht betroffen sein.