web-dev-qa-db-fra.com

Bordure CSS RGBA / arrière-plan alpha double

Je travaille sur un site Web qui implique beaucoup de transparence, et j'ai pensé que j'essaierais de le construire entièrement en RGBA et ensuite de faire des solutions de secours pour IE. J'ai besoin d'un effet de bordure de style "facebox", où la bordure extérieure est arrondie et est moins opaque que l'arrière-plan de la boîte qu'elle entoure.

Le dernier exemple de http://24ways.org/2009/working-with-rgba-colour semble suggérer que c'est possible, mais je n'arrive pas à le faire fonctionner. Quand j'essaye ce qui suit:

<!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>

Il semble que l'arrière-plan "s'étende" sous la bordure de l'élément, ce qui entraîne l'addition des valeurs de pixel. Ainsi, lorsque l'arrière-plan et la bordure sont semi-transparents, la bordure sera TOUJOURS plus opaque que l'arrière-plan de l'élément. C'est exactement le contraire de ce que j'essaie de réaliser, mais il semble que cela devrait être possible sur la base des exemples que j'ai vus.

Je dois également ajouter que je ne peux pas utiliser un autre élément à l'intérieur du conteneur, car je vais également utiliser un rayon de bordure sur le conteneur pour obtenir des coins arrondis, et le webkit quadrille les coins des éléments enfants s'ils ont un arrière-plan assigné, ce qui signifierait essentiellement une bordure extérieure arrondie avec un contenu carré.

Désolé, je ne peux pas publier une image de ceci ... Apparemment, je n'ai pas assez de représentants pour publier une image.

htmlcssrgba
25
stockli

Vous pouvez utiliser le nouveau background-clip: padding-box; propriété pour y arriver. Il calcule d'où doit commencer l'arrière-plan dans une boîte. Pour plus de détails et d'exemples, consultez ici

26
linkyndy

Tester ceci dans Firefox confirme ce que vous décrivez - et il m'a fallu un peu de temps pour en comprendre les implications! Avoir la bordure moins transparente n'aura aucun effet sur l'arrière-plan transparent en dessous, car la bordure est (comme vous le dites) additive.

Dans ce cas, vous devrez simuler l'effet recherché et travailler avec les couleurs plus que l'alpha:

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

Essaye ça:

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