Compte tenu de ce HTML
#my_div {
width: 100px;
height: 100px;
background-color: #0f0;
opacity: 0.4;
border: 3px solid #ff0000;
}
5 Réponses :
Utilisez CSS3 RGBA CODE>, c'est CSS SO CROSS-Browser sera un problème ici, mais pour IE, vous pouvez utiliser CSS3 PIE #my_div {
width: 100px;
height: 100px;
background-color: rgba(R, G, B, A);
border: 3px solid #ff0000;
}
@ F4R-20 C'est une bonne propriété, non prise en charge par IE comme d'habitude, mais vous pouvez utiliser la tarte
@ F4R-20 Yup, vous avez raison, c'est alpha, il y a aussi un nouveau 1, HSLA
CSS: ou comme les autres ont dit: RGBA pour la couleur de fond, mais toute la teneur intérieure restera non transparente dans ce cas J'ai bien peur que la seule façon soit d'envelopper votre div avec un autre div, qui aura la frontière:
L'une des manières serait comme ça (garder l'opacité de tous les éléments internes):
Il n'y a pas d'attribut non opacité code> mais ce que vous pouvez faire est de définir la couleur d'arrière-plan de cette div avec RGBA. Cela vous permet de spécifier essentiellement une opacité essentiellement, mais juste pour l'arrière-plan (cela n'affectera donc pas la frontière) background: rgba(0, 255, 0, 0.4);
En fait, Alien était d'abord à répondre, mais vous avez un cookie;)
Oui, Alien était plus rapide, mais Andy donne une réponse légèrement plus complète ... et moi via la pièce a décidé et accepte Andy's Réponse =) Merci tout le monde.
Voir la réponse acceptée à cette question: https://stackoverflow.com/a/4062032/1068266
Il stipule que vous pouvez utiliser le format RGBA pour la couleur de la bordure et en définissant la valeur "A", vous pouvez définir l'opacité de la bordure. Comme indiqué dans les commentaires Toutefois, la propriété Opacité CSS définit l'opacité de l'objet entier, y compris la frontière.
Malheureusement, lorsque vous appliquez une opacité à un élément, elle est également appliquée à n'importe quelle marge, rembourrage ou bordure appliquée à l'élément.
La meilleure solution serait d'utiliser RGBA (comme précédemment affiché) et d'avoir un PNG opaque 1x1 sous forme de repli pour les navigateurs hérités (si vous les utilisez) et l'utilisez-le comme l'image d'arrière-plan de l'élément.
Un inconvénient de l'utilisation de la propriété Opace est si votre #my_div contient un contenu (texte ou images), le contenu lui-même aura également cette opacité et entraînera probablement un style indésirable.
Je ne suis pas tout à fait sûr de ce que vous demandez (barrière de la langue), mais l'opacité de la frontière sera la même que l'opacité de l'élément.
Non, mais vous pouvez faire un div pour la frontière autour de la Div transparente.
Dupliqué possible de Opacité de la frontière CSS3?