frontière CSS RGBA / fond alpha à double

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

  •  26-09-2019
  •  | 
  •  

Question

Je travaille sur un site Web qui a beaucoup de transparence en jeu, et je pensais que je voudrais essayer de le construire entièrement en RGBA, puis faire des solutions de repli pour IE. Je besoin d'un effet frontière de style « facebox », où la frontière extérieure est arrondie et est moins opaque que le fond de la boîte entoure.

Le dernier exemple de http://24ways.org/2009/working-with- RGBA couleur semble indiquer qu'il est possible, mais je ne peux pas sembler le faire au travail. Quand je procédez comme 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 « étend » sous la frontière de l'élément, ce qui provoque les valeurs de pixels pour obtenir additionnés. Ainsi, lorsque les deux l'arrière-plan et la frontière sont semi-transparents, la frontière sera toujours plus opaque que l'arrière-plan de l'élément. Ceci est exactement le contraire de ce que je suis en train de réaliser, mais il semble que cela devrait être possible à partir des exemples que je l'ai vu.

Je dois ajouter que je ne peux pas utiliser un autre élément à l'intérieur du récipient, parce que je vais aussi utiliser un rayon de frontière sur le récipient pour obtenir des coins arrondis et carrés webkit les coins des éléments enfants si elles ont un fond affecté, ce qui signifierait essentiellement une bordure extérieure arrondie avec le contenu carré.

Désolé je ne peux pas poster une image de ce ... Apparemment, je n'ai pas assez pour poster représentant une image.

Était-ce utile?

La solution

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

Autres conseils

Test cela dans Firefox confirme ce que vous décrivez - et il m'a fallu un peu de temps pour réaliser les implications de cela! Avoir la frontière moins transparente aura aucun effet sur le fond transparent en dessous, parce que la frontière est (comme vous le dites) additif.

Dans ce cas, vous devrez simuler l'effet que vous et le travail avec les couleurs plus que l'alpha: 

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

Essayez ceci: 

#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;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top