Ich möchte die Deckkraft des untergeordneten Elements nicht von dem übergeordneten Element in CSS übernehmen

Question

Ich möchte die Deckkraft des untergeordneten Elements nicht von dem übergeordneten Element in CSS erben.

Ich habe ein Div, das das Elternteil ist, und ich habe ein anderes Div innerhalb des ersten Divs, das das Kind ist.

Ich möchte die Eigenschaft Opazität im übergeordneten Div festlegen, aber ich möchte nicht, dass das untergeordnete Div die Eigenschaft Opazität erbt.

Wie kann ich das tun?

Answer 1

<!--Background opacity-->
<style>
    .container1 {
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 0, .5);
        margin-bottom: 50px;
    }
</style>
<div class="container1">
    <div class="box1">Text</div>
</div>

<!--Before, after, z-index opacity-->
<style>
    .container2 {
        width: 200px;
        height: 200px;
        position: relative;
        margin-bottom: 100px;
    }

    .container2:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: black;
        opacity: .5;
        z-index: 1;
    }

    .box2 {
        position: relative;
        z-index: 2;
    }
</style>
<div class="container2">
    <div class="box2">Text</div>
</div>

<!--Outline opacity-->
<style>
    .container3 {
        width: 200px;
        height: 200px;
        outline: 50px solid rgba(0, 0, 0, .5);
        margin: 50px;
    }

    .box3 {
        position: relative;
        left: -16px;
    }
</style>
<div class="container3">
    <div class="box3">Text</div>
</div>

Answer 2

Meine Antwort bezieht sich nicht auf das statische Eltern-Kind-Layout, sondern auf Animationen.

Ich tat eine svg-Demo heute, und ich brauchte svg innerhalb von div sein (weil svg mit Elternteil div Breite und Höhe erstellt wird, um den Pfad um zu animieren), und dieses Elternteil div unsichtbar während svg-Pfad-Animation sein musste (und dann sollte dieses div zu animate opacity from 0 to 1 das ist der wichtigste Teil). Und weil parent div mit opacity: 0 meine svg verstecken wollte, stieß ich auf diesen Hack mit visibility Option (Kind mit visibility: visible kann innerhalb des Elternteils gesehen werden mit visibility: hidden ):

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

Und dann, in js, entfernen Sie .invisible Klasse mit Timeout-Funktion, Hinzufügen von .opacity-zero Klasse, Layout auslösen mit etwas wie whatever.style.top; und Entfernen .opacity-zero Klasse.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Prüfen Sie besser diese Demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Answer 3

Wenn Sie ein Bild als transparenten Hintergrund verwenden müssen, können Sie dies möglicherweise mit einem Pseudoelement umgehen:

html

<div class="wrap"> 
   <p>I have 100% opacity</p>  
</div>

css

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

Answer 4

Ich löste dieses Problem, indem ich zunächst ein verblasstes Bild erstellte und speicherte, das ich dann im css-Hintergrund verwendete. Ich habe den folgenden Python-Code verwendet:

from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')

Hier war im1.jpg einfach ein weißes Bild mit denselben Abmessungen wie im2.jpg.

Answer 5

Auf Mac können Sie Vorschau Editor, um die Deckkraft auf ein weißes Rechteck anzuwenden, das über Ihr .png-Bild gelegt wird, bevor Sie es in Ihr .css einfügen.

1) Bild
Logo

2) Erstellen Sie ein Rechteck um das Bild
Rechteckig um Logo

3) Ändern Sie die Hintergrundfarbe in weiß.
weiß gewordenes Rechteck

4) Deckkraft des Rechtecks anpassen
undurchsichtiges Bild