CSS RGBA Grenze/Hintergrund alpha double

Ich arbeite an einer Website, die viel Transparenz beinhaltet, und ich dachte, ich würde versuchen, es komplett in RGBA zu bauen und dann Fallbacks für IE tun. Ich brauche einen "facebox" -Stil-Rahmeneffekt, bei dem der äußere Rand abgerundet ist und weniger undurchsichtig ist als der Hintergrund der umgebenden Box.CSS RGBA Grenze/Hintergrund alpha double

Das letzte Beispiel von http://24ways.org/2009/working-with-rgba-colour scheint zu suggerieren, dass es möglich ist, aber ich kann nicht scheinen, es zur Arbeit zu bringen. Wenn ich den folgenden Versuch:

<!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 ist wie der Hintergrund scheint „extends“ unterhalb der Grenze des Elements, die die Pixelwerte verursacht addiert werden. Wenn sowohl der Hintergrund als auch der Rand halbtransparent sind, ist der Rand IMMER undurchsichtiger als der Hintergrund des Elements. Dies ist genau das Gegenteil von dem, was ich erreichen möchte, aber es scheint, als ob es basierend auf den Beispielen, die ich gesehen habe, möglich sein sollte.

Ich sollte auch hinzufügen, dass ich kein anderes Element innerhalb des Containers verwenden kann, weil ich auch einen Umrandungsradius auf dem Container verwenden werde, um abgerundete Ecken zu erhalten, und Webkit Quadrate die Ecken der untergeordneten Elemente wenn Sie haben einen Hintergrund, der im Wesentlichen eine abgerundete äußere Begrenzung mit quadratischem Inhalt bedeutet.

Tut mir leid, ich kann kein Bild von diesem ... posten. Anscheinend habe ich nicht genug rep, um ein Bild zu posten.

Quelle

2010-04-12 stockli

Können Sie einen Link zum Bild hinzufügen ... oder sind Sie mit dem Posten Links begrenzt? – alex

stockli möchte erreichen http://media.24ways.org/2009/01/f7.png. Ich habe das Code-Beispiel auf 24ways probiert und es scheint nicht zu funktionieren. – Haris

Ja, leider bin ich auch mit Links eingeschränkt. Ich kann jedoch versuchen, einen in diesem Kommentar zu veröffentlichen! Hier geht es: http://tinypic.com/view.php?pic=200qm90&s=5 – stockli

können Sie verwenden die neue background-clip: padding-box; Eigenschaft, um dies zu erreichen. Er berechnet, woher der Hintergrund in einem Feld beginnen soll. Für weitere Details und Beispiele, überprüfen Sie here

Quelle

2011-01-29 21:17:42 linkyndy

Das ist die Antwort! Vielen Dank! – stockli

Super! Arbeitete auch für mich. – petsoukos

Das Testen in Firefox bestätigt, was Sie beschreiben - und es dauerte eine Weile, bis ich die Konsequenzen erkannte! Wenn die Grenze weniger transparent ist, hat das keinen Einfluss auf den darunter liegenden transparenten Hintergrund, da die Grenze (wie Sie sagen) additiv ist.

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

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

Quelle

2010-04-12 23:36:35

Freut mich zu hören, dass ich nicht verrückt bin ... Es ist nur überraschend, dass alle Demos implizieren, dass es möglich sein sollte. Safari ist auch ein Problem an großen Rändern mit RGBA, die quadratisch sind, da die Bereiche in den Ecken auch additiv sind, so dass jede Ecke eine kleine quadratische Box im Rand hat. Das geht weg, wenn Sie border-radius verwenden, was mich in diesem Fall rettet. Du hast Recht, aber ich würde auf Farbvariationen zurückgreifen müssen, um das zu tun. Leider habe ich in diesem Fall einen Farbverlauf hinter meinem Layout, so dass es sehr offensichtlich ist, dass es nicht ganz richtig funktioniert. Danke für deine Antwort! – stockli

Versuchen Sie folgendes:

#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; 
}

Quelle

2010-10-31 06:54:27 kingjeffrey

Interessant! Sieht gut in Firefox aus (noch besser mit -moz-border-radius), aber es funktioniert immer noch nicht in Safari ... Es verdoppelt sich wie zuvor in den Ecken, obwohl die Grenze ein bisschen dunkler ist. Wenn Sie einen Rand-Radius darauf setzen, verschwindet die Verdoppelung in den Ecken, aber es hat eine seltsame Verdopplung an der inneren abgerundeten Ecke. Danke dafür! Näher als vorher! – stockli

CSS RGBA Grenze/Hintergrund alpha double

Antwort

Verwandte Themen