28173 sujets

CSS et mise en forme, CSS3

Rectangle tramé avec texte sur une image

Bonjour à tous,

Je recherche depuis quelques temps le moyen de faire l'effet présent sur le site du Figaro :

http://www.lefigaro.fr/photos-du-jour/

Avoir ce cadre avec une opacité diminuée (une div) contenant du texte et se trouvant calé par dessus l'image.

Pouvez-vous m'aider ? Merci d'avance de vos réponses.

ps : j'ai essayé de fouiller un peu leur code mais il y a toujours quelque chose qui ne colle pas...
Bonour, le plus simple un bon vieux montage avec photoshop, compatible tous navigateur et valide jusqu'à la fin des temps.

Sinon avec des problèmes de validations, un div en position relative avec en background ton image et positionné correctement (bottom: 0;) un div en absolute avec un background blanc et une -moz-opacity: 0.8; par exemple pour FF et filter: alpha(opacity=80); pour IE6 et 7 en commentaire conditionnels

<div class="image">
   <div class="opacite">
   </div>
</div>

.image{
background: url(blabla.jpg);
position: relative;
width: xpx;
height: ypx;
}

.opacite{
background: #fff;/* ou autre*/
width: xpx;
height: zpx;
position: absolute;
bottom: 0;
-moz-opacity: 0.8;
}

dans le head de ton code

<!--[if IE]>
   <style>
   .opacite{filter: alpha(opacity=80);}
   </style>
<![endif]-->
Hello,

Si tu es en PHP, il y a moyen de réaliser ce genre d'effet avec la librairie gd et d'ainsi modifier ton image.

A+
Laurent
Sujet clos
Aller à