Contenu opaque sur DIV translucide
Bonjour à tous,
Je cherche à afficher du contenu sur un div sur lequel j'aplique une transparence partielle. Le contenu doit etre opaque et la taille de cette div doit pouvoir s'adapter à son contenu.
Le probleme c'est que tout ce qui ce trouve dans un div translucide devient du meme coup translucide à son tours.
Du coup, j'ai essayé de faire une div translucide en absolute, placée sous ma div de contenu mais la div en absolute se place systematiquement au dessus ce que je ne souhaite pas. de plus il est impossible de définir une hauteur de 100% si le conteneur n'a pas de taille fixe.
J'ai donc mis mes 2 div en absolute mais comme elles sortent du flux normal, ce qui se trouve plus bas dans la page n'est pas "poussé".
Ma derniere solution :
Je cree une div conteneur en position:relative et largeure fixe dans laquelle je place ma div translucide en absolute avec width et height:100% et ma div de contenu avec width:100%. Ensuite, j'execute un JS qui donne à mon conteneur la meme hauteur que celle de ma div de contenu (offsetHeight).
Cette solution fonctionne à peut pres correctement mais si, par exemple, mon contenu comporte une image : mon document se charge>> le JS redimmentionne >> l'image fini de se charger >> la div de contenu est agrandie par l'image >> mon site est pas beau...
Ceci est un exemple mais on peut facilement imaginer des cas posant probleme (changement de la taille du texte...).
Donc au final je me retrouve avec un bidouillage qui, j'en suis sure, va me poser probleme.
C'est pourquoi je vous expose mon probleme en esperant que quelqu'un saura immaginer une solution plus élégante.
Vous trouverez une illustration du problème ici
Merci pour le coup de main !
