transparence et problème de texte

Question

Je joue avec l'attribut CSS opacity.

Cela fonctionne bien pour la boîte (avec à 50% ou noir à 30%) - le problème est que le texte à l'intérieur de la boîte est aussi transparent.

Je voudrais que le texte soit 100% blanc dans une boîte avec 30% de transparence.

La solution consiste à utiliser CSS avec des réglages ou d'utiliser un .png pour l'arrière-plan et d'oublier le paramètre opacity. Dites-moi, comment faire 30% d'opacité avec 100% de texte d'opacité à l'intérieur.

Merci à l'avance

Answer 1

Vos choix sont:

• Using CSS3: background: rgba(255, 255, 255, 0.3). Live Demo
• Placez absolument deux étiquettes <div> l'une sur l'autre. L'un d'entre eux est l'arrière-plan et a le paramètre opacity. Le deuxième contient le texte et un arrière-plan transparent.
• Comme vous l'avez laissé entendre dans votre question, vous pouvez utiliser un fichier .png avec transparence 30%.

---

Je savais je avais lu sur un moyen de faire le travail rgba dans IE.

Voir: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
} 

Answer 2

#box { color:white; background-color:rgba(0,0,0,0.3); } 

Note: rgba ne fonctionne pas dans IE6-8