Jouer avec CSS Opacité

Je suis en train de créer un ButtonBar en utilisant de simples <div> et modifier son opacité à 50% et donner un fondJouer avec CSS Opacité

Mais les éléments qui viennent à l'intérieur de cette exposition de division de la même transparence que il y a des parents <div>. Je veux qu'ils conservent 100% d'opacité. (Ce qui n'est pas possible). Comment rendre cela possible?

Un échantillon CSS de ce que je suis en train de faire est ce

<style>  
    #bar { background:#09f;opacity:0.5; } 
    #bar a { background:#FF0;opacity:1; } 
</style> 
<div id="bar"> 
    <a href="#">Home</a> 
    <a href="#">Contact</a> 
    <a href="#">Feedback</a> 
</div>

Source

2010-06-28 Starx

Vous devez utiliser la propriété rgba pour cela, car l'opacité affecte tous les enfants.

#bar { background: rgba(0, 120, 255, 0.5); }

Chris Coyier (Les astuces CSS-) a écrit un message à ce sujet: http://css-tricks.com/rgba-browser-support/

Source

2010-06-28 07:19:59 peirix

Meilleure réponse possible avec le 4ème RGBA :) +1 – RobertPitt

Param Mais ce n'est pas compatible IE – Starx

@Starx ni est 'opacity' Do comme dit @RobertPitt, inclure le 'rgba' en tant que paramètre secondaire, donc vous avez un repli pour IE. Si vous voulez une solution compatible avec plusieurs navigateurs, utilisez la réponse d'oezi: png transparent (ne fonctionnera pas dans IE6, cependant), qui n'est pas aussi fluide que l'utilisation de CSS, mais qui fonctionnera avec IE7 +. – peirix

si vous voulez que l'arrière-plan soit opaque, vous pouvez utiliser un .png transparent ou une rgba valeur en arrière-plan. sinon ce n'est pas possible (comme vous l'avez mentionné).

Source

2010-06-28 07:21:38 oezi

Définissez l'opacité dans l'éditeur graphique et aplatissez les deux couches ensemble.

Vous pouvez également add another element.

(Vous devez également utiliser a list.)

Source

2010-06-28 10:24:28 reisio

Jouer avec CSS Opacité

Répondre

Questions connexes