CSS: fond d'opacité seulement, pas le texte à l'intérieur

Question

J'ai cette boîte de forme d'enregistrement, et j'aime vraiment comment l'arrière-plan obtient l'opacité, transparent avec 25% (85), mais alors je remarque que le texte et les éléments de forme aussi devient sombre et un peu, donc je me demande comment le faire uniquement avec la bordure et le fond et pas avec les choses à l'intérieur de la boîte?

#regForm { 
z-index:11; 
position: absolute; 
top: 120px; 
left: 500px; 
background: #000; 
color: #FFF; 
width: 500px; 
height: 240px; 
border: 6px solid #18110c; 
text-align: center; 
margin: 40px; 
padding: 1px; 
    opacity: 0.85; 
    -moz-opacity: 0.85; /* older Gecko-based browsers */ 
    filter:alpha(opacity=85); /* For IE6&7 */ 

} 

Answer 1

La voie facile serait de déplacer le texte dans un div séparé, like so. Fondamentalement, vous appliquez l'opacité à une div séparée et positionner le texte sur le dessus ...

<div id="parent"> 
    <div id="opacity"></div> 
    <div id="child">text</div> 
</div> 

div#parent { position:relative; width:200px; height:200px; } 
div#child { position:absolute; width:200px; height:200px; z-index:2; } 
div#opacity { position:absolute; width:200px; height:200px; z-index:1; } 

L'autre voie serait rgba. N'oubliez pas qu'il existe une propriété css distincte pour alimenter IE car elle ne prend pas en charge la propriété rgba. Vous pouvez également nourrir un png transparent.

#regForm { 
    background: rgb(200, 54, 54); /* fallback color */ 
    background: rgba(200, 54, 54, 0.5); 
} 

Et pour IE ...

<!--[if IE]> 

    <style type="text/css"> 

    .color-block { 
     background:transparent; 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); 
     zoom: 1; 
    } 

    </style> 

<![endif]--> 

Personnellement je partirais avec la première option, car il est moins embêtant.

Answer 2

Impossible à faire: tous les éléments enfants hériteront de l'opacité du parent.

Votre cas, c'est facile, il suffit d'utiliser deux div s. Avoir l'image de fond en un et appliquer l'opacité, et mettre le contenu dans le second. Utilisez position: absolute et z-index pour les placer les uns sur les autres.

Answer 3

RGBA est le chemin à parcourir si vous êtes à la recherche d'une solution CSS. Il est possible d'utiliser une couleur solide comme solution de repli pour les anciens navigateurs qui ne peuvent pas utiliser le RGBA.

.stuff { 
    background-color: rgb(55, 55, 55); 
    background-color: rgba(55, 55, 55, 0.5); 
} 

Vous pouvez également fallback sur une image:

.stuff2 { 
    background: transparent url(background.png); 
    background: rgba(0, 0, 0, 0.5) none; 
} 

Voici tout ce que vous avez besoin pour obtenir que cela fonctionne dans toutes les versions du mal de IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

Answer 4

Votre meilleur pari sera probablement pour utiliser des images PNG semi-transparentes pour votre arrière-plan ou pour définir les couleurs de l'arrière-plan et de la bordure à l'aide de RGBa. Les fichiers PNG fonctionneront bien si le balisage supplémentaire dont vous avez besoin pour créer un conteneur de largeur flexible ne vous dérange pas, mais ils ne sont pas non plus pris en charge dans IE6 (si cela vous pose problème).

RGBa est moins répandu dans tous les navigateurs, mais si la transparence est uniquement utilisée pour le style visuel, il est préférable d'utiliser une amélioration progressive.

Pour RGBA, vous aurez besoin d'ajouter une ligne supplémentaire comme solution de repli:

#regForm { 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.5); 
    border-color: rgb(24, 17, 12); 
    border-color: rgba(24, 17, 12); 
} 

Tout navigateur qui ne reconnaît pas la déclaration RGBA utilisera simplement le RGB ordinaire.

CSS-Tricks article on RGBa across browsers

Answer 5

Pas besoin de faire toutes ces choses comme pas besoin d'appliquer des positions sur une div puis opacité, ici est très simple moyen d'y parvenir, ne background: rgba(0, 0, 0, 0.6);

vous devez utiliser la couleur de fond avec valeur d'opacité.