[Résolu] Empilement d'image animée et transparente

Je construit mon propre site web, donc je tatonne. Pourriez-vous m'aider à résoudre mon problème. Voici l'adresse CodePen http://codepen.io/dorothywilk/pen/zbkwB
Fourni:
- ciel.gif image animée
- fondRayon.png
- cadreBebe.jpj
- alexandra.jpg cette photo se trouve dans un bloc mon paragraphe qui a aussi la propriété opacity. J'aimerais que mon image alexandra.jpg soit net et que je puisse lui mettre sa propre opacité.
Voici 3 jours que j'essaie d'y arriver, malgré tout je n'y arrive pas.

Merci pour votre aide.

Bonjour,
c'est le background-color de .monBloc qui t'embete comme ça Le HTML semble mal structuré, bidouillé avec le CSS, du coup .monBloc passe par dessus .alexandra et tu te retrouve avec le blanc à 50% d'opacité sur la photo.

Bonjour Yoan,

oui, tu as raison si on enlève le background-color la photo est bien nette. Mais, je voudrais garder ce fond blanc à moitié transparent sous le texte qui est à côté de ma photo.

Et là, je ne vois pas comment faire?

Yoan a écrit :
Bonjour,
c'est le background-color de .monBloc qui t'embete comme ça Le HTML semble mal structuré, bidouillé avec le CSS, du coup .monBloc passe par dessus .alexandra et tu te retrouve avec le blanc à 50% d'opacité sur la photo.

RE:
Ne faudrait-il pas jouer avec les z-index par rapport parent et enfant, pour le contexte d'empilement?
De plus après le tout va être intégrer dans WP.

dorothywilk a écrit :
Bonjour Yoan,

oui, tu as raison si on enlève le background-color la photo est bien nette. Mais, je voudrais garder ce fond blanc à moitié transparent sous le texte qui est à côté de ma photo.

Et là, je ne vois pas comment faire?

Bonjour,

Couleurs et fonds
Peut-être pas la meilleure solution, le positionnement absolu risque de poser problème (en règle générale, à utiliser en connaissance de cause)

La transparence de couleur avec RGBa en CSS3
Beaucoup plus intéressant si la rétrocompatibilité n'est pas attendu (CSS3)

Adapter une légende à la largeur de l'image
Un article intéressant également lorsque l'on veut positionner une image et un texte (pour l'exemple)

Pensez à valider vos codes :

float: top; 

n'existe pas et ne risque pas de fonctionner
Méfiez-vous également du positionnement à tout va, le flux, c'est bien

Bon courage, il reste encore du travail

Merci beaucoup pour ta réponse, je prends note des liens. Par contre le float: top; netbeans me l'a proposé dans ses choix et je l'ai essayé.
Effectivement, je vais le mettre en commentaire si cela ne change rien, je delete.
D'accord avec vous pour le positionnement.Qu'entends-tu par le flux? "Méfiez-vous également du positionnement à tout va, le flux, c'est bien"

6l20 a écrit :
Bonjour,

Couleurs et fonds
Peut-être pas la meilleure solution, le positionnement absolu risque de poser problème (en règle générale, à utiliser en connaissance de cause)

La transparence de couleur avec RGBa en CSS3
Beaucoup plus intéressant si la rétrocompatibilité n'est pas attendu (CSS3)

Adapter une légende à la largeur de l'image
Un article intéressant également lorsque l'on veut positionner une image et un texte (pour l'exemple)

Pensez à valider vos codes :

float: top; 

n'existe pas et ne risque pas de fonctionner
Méfiez-vous également du positionnement à tout va, le flux, c'est bien

Bon courage, il reste encore du travail

Bonjour à toutes et tous,

à force de chercher, j'ai enfin trouvé la solution qui me convenait. J'ai encore du travail à effectuer. Sûrement à un e prochaine fois.

Voici le lien pour voir le résultat. http://codepen.io/dorothywilk/pen/vhALw?editors=110

Merci à tout le monde.
Je coche ce sujet comme résolu.

dorothywilk a écrit :
Merci beaucoup pour ta réponse, je prends note des liens. Par contre le float: top; netbeans me l'a proposé dans ses choix et je l'ai essayé.
Effectivement, je vais le mettre en commentaire si cela ne change rien, je delete.
D'accord avec vous pour le positionnement.Qu'entends-tu par le flux? "Méfiez-vous également du positionnement à tout va, le flux, c'est bien"

Modifié par dorothywilk (05 Jul 2014 - 14:47)