Transparence sur l'arrière-plan de la div parent

Question

Je me demande s'il est possible d'affecter la couleur du bg ou l'opacité du div parent.

J'ai un div avec cette couleur blanche transparente :

background-color:rgba(255,255,255,0.9);

La div contient des champs de texte aux coins arrondis. La couleur d'arrière-plan des champs de texte peut-elle être un nombre de transparence négatif de sorte que l'opacité totale de la div et du champ de texte soit égale à 0,5 ?

C'est comme si l'on ajoutait de la transparence dans un coin arrondi d'une div déjà transparente.

J'ai trouvé trois solutions possibles :

1. Rendre la dic parent complètement transparente et dessiner des divs comme un cadre autour des champs. (Cela semble très compliqué.)
2. Ajoutez le contenu sous la div, à l'intérieur du champ de texte. (Performance ?)
3. Une sorte d'intersection.

Que pensez-vous que je doive faire ?

-- Editer ---

J'ai utilisé une variante de la solution #2, j'ai créé un fichier png. Voici le fichier (non modifié) résultat (Cliquez sur contactez-nous pour ouvrir la fenêtre modale). C'est difficile à voir, à cause du flou, mais la fenêtre est également transparente.

Note c'est loin d'être la meilleure solution puisqu'il faut mettre à jour le png lorsque je mets à jour le contenu en dessous.

Answer 1

Si je comprends bien, vous voulez ouvrir une fenêtre/un trou dans le parent div . Pour autant que je sache, vous ne pouvez pas faire cela, parce que le div se trouve derrière les zones de texte, et toute transparence que vous leur appliquerez entraînera l'affichage de l'image. div à montrer à travers les boîtes, PAS le contenu derrière la boîte. div .

Peut-être qu'au lieu d'une couleur d'arrière-plan, vous pouvez faire en sorte que l'élément div une image PNG avec deux trous transparents qui coïncident avec les zones de texte, mais il s'agit d'une solution de contournement comme la vôtre...

Answer 2

Pour autant que je sache, la transparence appliquée à la div extérieure s'appliquera à tout ce qui se trouve à l'intérieur. Je ne sais pas exactement ce que vous voulez réaliser ici, peut-être devriez-vous poster un peu plus de code ou une maquette sur jsfiddle.

Voici ce que j'ai pu trouver sur le sujet : http://css-tricks.com/384-non-transparent-elements-inside-transparent-elements/

EDIT : Pour votre problème, ce que j'essaierais (je ne suis pas sûr que cela fonctionnera) est de suivre une solution similaire au lien que j'ai posté précédemment. Il y a deux divs séparées, positionnées l'une au-dessus de l'autre. Je recommanderais d'avoir le formulaire avec vos entrées transparentes sur la couche supérieure, peut-être que cela peut faire quelque chose pour vous ? Je ne sais pas quoi vous dire d'autre, la solution des pngs n'est pas la meilleure, mais vous pourriez avoir besoin d'utiliser des pngs ici et là.

Quelque chose comme ça, peut-être : http://jsfiddle.net/XnATc/21/

Answer 3

Johannes Lund

Oui, vous devriez utiliser des fichiers d'image png pour cela, sinon les choses seront très compliquées avec le codage des couleurs hexagonales et les mathématiques qui s'y rapportent.