CSS RGBA Grenze / Hintergrund alpha Doppel

StackOverflow https://stackoverflow.com/questions/2626039

  •  26-09-2019
  •  | 
  •  

Frage

Ich arbeite auf einer Website, die viel Transparenz beteiligt sind, und ich dachte, ich würde versuchen, es in RGBA ganz zu bauen und dann Fallbacks für IE zu tun. Ich brauche eine „Facebox“ Stil Grenze Effekt, wo der äußere Rand abgerundet ist und weniger opak als dem Hintergrund der Box um ihn umgibt.

Das letzte Beispiel von http://24ways.org/2009/working-with- rgba-Farbe scheint darauf hinzudeuten, dass es möglich ist, aber ich kann nicht scheinen, um es an die Arbeit zu machen. Wenn ich versuche, die folgende: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>RGBA Test</title>
 <style type='text/css'>
   body {
     background: #000;
     color: #fff;
   }
   #container {
     width: 700px;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.2);
     border: 10px solid rgba(255, 255, 255, 0.1);
     padding: 20px;
   }
  </style>
</head>
<body>
  <div id='container'>
    This should look like a facebox.
  </div>
</body></html>

Es scheint, wie der Hintergrund „extends“ unterhalb der Grenze des Elements, das die Pixel verursacht Werte addiert werden. Somit wird, wenn sowohl der Hintergrund und die Grenze ist semi-transparent, wird die Grenze ALWAYS seine undurchsichtige als der Hintergrund des Elements. Das ist genau das Gegenteil von dem, was ich zu erreichen bin versucht, aber es scheint, wie es möglich sein sollte, die Beispiele basieren auf den ich gesehen habe.

Ich möchte auch hinzufügen, dass ich nicht ein weiteres Element im Inneren des Behälters verwenden, weil ich werde auch ein border-radius auf dem Behälter verwenden, um abgerundete Ecken zu erhalten, und webkit Quadrate die Ecken der untergeordneten Elemente, wenn sie habe einen Hintergrund zugeordnet, der im wesentlichen eine abgerundete Außengrenze mit quadratischem Inhalt bedeuten würde.

Leider kann ich kein Bild von diesem Post ... Anscheinend habe ich nicht genug rep ein Bild zu veröffentlichen.

War es hilfreich?

Lösung

Sie können die neue background-clip: padding-box; Eigenschaft verwenden diese in Gang zu bringen. Es berechnet wo aus sollte der Hintergrund innerhalb eines Feldes starten. Weitere Informationen und Beispiele finden Sie hier

Andere Tipps

Testing dies in Firefox bestätigt, was Sie beschreiben - und es dauerte eine Weile, um die Auswirkungen dieser zu verwirklichen! die Grenze weniger transparent hat, wird unter ihm keine Auswirkung auf den transparenten Hintergrund haben, weil die Grenze ist (wie Sie sagen) additiv.

In diesem Fall werden Sie den Effekt simulieren müssen Sie nach und Arbeit mit den Farben mehr als die alpha: 

background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);

Versuchen Sie diese: 

#container {
    width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border: 10px solid rgba(255, 255, 255, 0.1);
    padding: 20px;

    /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top