Photoshop in CSS: Wie wird Fill in CSS übersetzt?

  • Ich habe in Photoshop ein Inhaltsfeld mit der Hintergrundfarbe # bc0018 mit einer Deckkraft von 65% und einer Füllmenge von 50%.

    Ich kann übersetzen Die Hintergrundfarbe und die Deckkraft gehören dazu, aber ohne die 50% -Füllung sieht die Hintergrundfarbe anders aus.

     .content-box {
        background-color: rgba(188, 0, 24, 0.65); }
     

    Irgendwelche Vorschläge auf das richtige "fill" in CSS zu bekommen?

    BEARBEITEN

    Ich habe das nur geteilt Deckkraft um die Hälfte und es scheint den gleichen Effekt wie bei einer 50% -Füllung zu erzielen. Ich würde trotzdem gerne hören, wie andere Leute das machen. Ich möchte definitiv kein Bild dafür erstellen.

     .content-box {
        background-color: rgba(188, 0, 24, 0.325); }
     

    Danke!

    17 March 2012
    Abe
2 answers
  • Multiplizieren Sie die Deckkraftbrüche der Deckkraft und der Füllmenge, und Sie erhalten den endgültigen Deckkraftwert. In Ihrem Fall wäre dies 0,65 * 0,5 = 0,325. Sie haben also Recht, dass die Halbierung der Deckkraft in diesem Fall funktioniert.

    Es gibt jedoch bestimmte Fallstricke, die eine direkte Konvertierung von Photoshop in CSS schwierig machen. Die Deckkraft der Füllung in PS wirkt sich nicht auf Schlagschatten und dergleichen aus, aber auch die CSS-Deckkraft wirkt sich auf alle von Ihnen angewendeten analogen Box-Schatten aus.

    18 March 2012
    Abhranil Das
  • rgba scheint nichts weiter als reguläre rgb-Werte zu sein

    {Hintergrundfarbe: rgba ( 154,201,40 0,5); }

    mit dem zusätzlichen Alpha / Opazitätswert

    {Hintergrund- Farbe: rgba (154,201,40, 0,5 ); }

    Fügen Sie einfach die vollen Deckkraftfarbenwerte in die ersten drei Felder ein (rgb) und setzen Sie die Deckkraft für den letzten Wert, z. 0,5 ist 50% Transparenz ...

    12 September 2013
    ckpepper02user15343