html - form - set opacity only for background




Il colore delle scatole impilate semitrasparenti dipende dall'ordine? (3)

Per una spiegazione di ciò che accade, vedere la risposta di Temani Afif.
Come soluzione alternativa, puoi prendere un intervallo, ad esempio, posizionarlo e dargli un indice z più basso se si trova all'interno di b . Quindi l'impilamento sarà sempre lo stesso: b è disegnato sopra a nella prima riga e a è disegnato sotto b nella seconda.

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

.b .a {position:relative; z-index:-1;}
<span class="a"><span class="b">     Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>

Perché il colore finale di due scatole impilate semitrasparenti dipende dall'ordine?

Come potrei farlo in modo da ottenere lo stesso colore in entrambi i casi?

.a {
  background-color: rgba(255, 0, 0, 0.5)
}

.b {
  background-color: rgba(0, 0, 255, 0.5)
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>


Puoi usare la proprietà css, mix-blend-mode : multiply ( supporto browser limitato)

.a {
  background-color: rgba(255, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
  mix-blend-mode: multiply;
}

.c {
  position: relative;
  left: 0px;
  width: 50px;
  height: 50px;
}

.d {
  position: relative;
  left: 25px;
  top: -50px;
  width: 50px;
  height: 50px;
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

<div class="c a"></div>
<div class="d b"></div>

<div class="c b"></div>
<div class="d a"></div>


Stai mescolando tre colori nel seguente ordine:

  • rgba(0, 0, 255, 0.5) over (rgba(255, 0, 0, 0.5) over rgba(255, 255, 255, 1))
  • rgba(255, 0, 0, 0.5) over (rgba(0, 0, 255, 0.5) over rgba(255, 255, 255, 1))

E ottieni risultati diversi. Questo perché il colore di primo piano viene miscelato con il colore di sfondo utilizzando la modalità di fusione normale 1 che non è commutative . E poiché non è commutativo, lo scambio di colori di primo piano e di sfondo produrrà risultati diversi.

1 Il metodo di fusione è una funzione che accetta un colore di primo piano e di sfondo, applica una formula e restituisce il colore risultante.

La soluzione consiste nell'utilizzare un metodo di fusione commutativo: uno che restituisce lo stesso colore per la stessa coppia di colori in qualsiasi ordine (ad esempio il metodo di fusione moltiplica, che moltiplica entrambi i colori e restituisce il colore risultante; o il metodo di fusione scurito, che restituisce il colore più scuro dei due).

$(function() {
  $("#mode").on("change", function() {
    var mode = $(this).val();
    $("#demo").find(".a, .b").css({
      "mix-blend-mode": mode
    });
  });
});
#demo > div {
  width: 12em;
  height: 5em;
  margin: 1em 0;
}

#demo > div > div {
  width: 12em;
  height: 4em;
  position: relative;
  top: .5em;
  left: 4em;
}

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="mode">
  <optgroup label="commutative">
    <option>multiply</option>
    <option>screen</option>
    <option>darken</option>
    <option>lighten</option>
    <option>difference</option>
    <option>exclusion</option>
  </optgroup>
  <optgroup label="non-commutative">
    <option selected>normal</option>
    <option>overlay</option>
    <option>color-dodge</option>
    <option>color-burn</option>
    <option>hard-light</option>
    <option>soft-light</option>
    <option>hue</option>
    <option>saturation</option>
    <option>color</option>
    <option>luminosity</option>
  </optgroup>
</select>

<div id="demo">
  <div class="a">
    <div class="b"></div>
  </div>
  <div class="b">
    <div class="a"></div>
  </div>
</div>

Per completezza, ecco la formula per calcolare il colore composto:

αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

con:

Cs: il valore del colore del colore di primo piano
αs: il valore alfa del colore di primo piano
Cb: il valore del colore del colore di sfondo
αb: il valore alfa del colore di sfondo B: la funzione di fusione





overlapping