Zone gerise transparent sur image avec du tex

Jérémie -  
Bonjour,

Je souhaiterais effectuer une zone grisée avec transparence sur une image puis y inscrire du texte avec lien (en HTML),

Par exemple sur Over blog sur la page d'accueil.

Connaissez vous un petit tuto pour effectuer ceci ?

D'avance je vous en remercie

Jérémie
Configuration: Windows XP
Firefox 3.5.5

21 réponses

Résumé de la discussion

Questionnement sur la création d'une zone grisée semi-transparente sur une image avec texte et lien HTML, pour une page d'accueil. Plusieurs réponses proposent des approches CSS mêlant opacité et filtres IE, avec des blocs overlay et des images de fond pour obtenir la zone transparente et le texte cliquable. D'autres échanges évoquent la compatibilité navigateurs, notamment IE6 à IE8, et suggèrent d'ajouter des niveaux d'opacité variés via des propriétés spécifiques et des filtres pour assurer le rendu. Par ailleurs, un lien vers une vidéo tutoriel est partagé comme démonstration pratique de la mise en œuvre.

Bobot (l’IA à votre service)
  1. avion-f16
    En jouant avec les div c'est facilement faisable.
    0
    1. monkey_monk
      http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
      0
      1. Jérémie
        en faite je cherche un tuto qui explique précisément ce que je cherche à faire ca je n'ai pas réussit à placer comme je voulais mes zone transparentes ...

        Merci de votre aide
        0
    2. avion-f16
      Je t'ai fais un petit tutoriel ici (c'est plus un exemple qu'un tuto, mais bon ...).
      0
      1. jérémie
        Je n'y ai pas accès a la video ...

        tu peux me le donner stp
        0
        2. avion-f16
          Ça y est : https://vimeo.com/8219938
          0
          1. monkey_monk
            Sympa la vidéo ! :)

            C'est bête mais j'avais jamais pensé à utiliser le selecteur universel dans une descendance ! ^^'

            Es-tu sur que ce soit compatible pour tout les navigateurs ? (IE6 au min)
            0
          2. avion-f16
            @monkey_monkJe n'ai pas essayé sur IE6 parce que je n'ai plus cette daube pour tester :D
            Normalement il ne devrait pas y avoir de problème, mais on ne sait jamais ...
            0
        3. jérémie
          Rajouter pour une compatibilité avec les navigateurs

          opacity : 0.8;
          /* For IE 5-7 */
          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
          /* For IE 8 */
          -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
          0
          1. phenX
            a titre indicatif pour tester sur toute les version de IE il y a IETESTER
            0
            1. monkey_monk
              Oui, mais il ne faut pas trop s'y fier car il y a de net différences entre les versions émulée et les vrais navi !
              Donc, c'est un bon point pour le développement mais il faut toujours faire une session débuging avec un vrai (IE6 par exemple).
              0
          2. jérémie
            Encore besoin d'un coup de main
            0
            1. jérémie
              Encore besoin d'un coup de main, ayant 3 images à traiter j'ai fait cela et ca fonctionne :

              HTML :

              <div id="trans1">
              <div ><h3>Text</h3></div>
              </div>
              <div id="trans2">
              <div ><h3>Text</h3></div>
              </div>
              <div id="trans3">
              <div ><h3>Text</h3></div>
              </div>

              CSS :

              #trans1{
              width:133px;
              height:150px;
              padding-top:75px;
              background-image: url(images/produits/mypix/thumb/s_00007345.jpg);
              background-repeat: no-repeat;
              }
              #trans1 div{
              height:60px;
              background-color:black;
              opacity:0.6;
              /* For IE 5-7 */
              filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
              /* For IE 8 */
              -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
              color:white;
              }
              #trans1 div *{
              opacity:1;
              }
              #trans2{
              width:133px;
              height:150px;
              padding-top:75px;
              background-image: url(images/produits/mypix/thumb/s_00855941.jpg);
              background-repeat: no-repeat;
              }
              #trans2 div{
              height:60px;
              background-color:black;
              opacity:0.6;
              /* For IE 5-7 */
              filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
              /* For IE 8 */
              -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
              color:white;
              }
              #trans2 div *{
              opacity:1;
              }
              #trans3{
              width:133px;
              height:150px;
              padding-top:75px;
              background-image: url(images/produits/mypix/thumb/s_00144157.jpg);
              background-repeat: no-repeat;
              }
              #trans3 div{
              height:60px;
              background-color:black;
              opacity:0.6;
              /* For IE 5-7 */
              filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
              /* For IE 8 */
              -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
              color:white;
              }
              #trans3 div *{
              opacity:1;
              }

              Comment simplifier le CSS ???
              je n'arrive pas a jouer sur les héritages ....

              Merci
              0
              1. avion-f16
                Tu peux utiliser les classes.
                Sur chacun des div représentant une image, tu lui mets une classe (en supplément de l'id).
                0
                2. avion-f16
                  Si c'est résolu coches le bouton prévu à cet effet.
                  0
                  1. jérémie
                    Nop encore un petit truc, en faite ca donne ca :

                    HTML
                    <div id="trans" class="transs1">
                    <div><h3>Le livre photo</h3></div>
                    </div>
                    <div id="trans" class="transs2">
                    <div>
                    <h3>Calendrier photo</h3></div>
                    </div>
                    <div id="trans" class="transs3">
                    <div><h3>Le mug photo</h3></div>
                    </div>

                    CSS
                    #trans{
                    width:133px;
                    height:150px;
                    padding-top:75px;
                    background-repeat: no-repeat;
                    float:left;
                    margin:0 5px 0 0;
                    }
                    .transs1{
                    background-image: url(images/produits/mypix/thumb/s_00007345.jpg);
                    }
                    #trans div{
                    height:60px;
                    background-color:black;
                    opacity:0.6;
                    /* For IE 5-7 */
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
                    /* For IE 8 */
                    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
                    color:white;
                    }
                    #trans div *{
                    opacity:1;
                    }
                    .transs2{
                    background-image: url(images/produits/mypix/thumb/s_00855941.jpg);
                    }
                    .transs3{
                    background-image: url(images/produits/mypix/thumb/s_00144157.jpg);
                    }

                    Cette partie ne fonctionne pas :
                    #trans div *{
                    opacity:1;
                    }

                    je vois pas ou ca peut bloquer au point de vue héritage ?

                    Merci de votre aide et patence !
                    0
                    1. avion-f16
                      Il faut mettre la même classe pour tous les div.
                      Ensuite, tu fais comme ça : .taclass div *
                      0
                      1. jérémie
                        Je me rends compte que j'ai déja un problème avec les ID qui doivent être unique...

                        En ce qui concerne mettre des classes identique pour tous les div comment je fais pour préciser que les images sont différentes pour les 3 ?
                        0
                        2. jérémie
                          J'en suis la :

                          CSS :
                          #trans1, #trans2, #trans3 {
                          width:133px;
                          height:150px;
                          padding-top:75px;
                          background-repeat: no-repeat;
                          float:left;
                          margin:0 5px 0 0;
                          }

                          .traombr{
                          height:60px;
                          background-color:black;
                          opacity:0.6;
                          /* For IE 5-7 */
                          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
                          /* For IE 8 */
                          -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
                          color:white;
                          }
                          .traombr *{
                          opacity:1;
                          margin:0;
                          padding:0;
                          }
                          .transs1{
                          background-image: url(images/produits/mypix/thumb/s_00007345.jpg);
                          }
                          .transs2{
                          background-image: url(images/produits/mypix/thumb/s_00855941.jpg);
                          }
                          .transs3{
                          background-image: url(images/produits/mypix/thumb/s_00144157.jpg);
                          }

                          HTML :
                          <div id="trans1" class="transs1">
                          <div class="traombr"><h3>Le livre photo</h3></div>
                          </div>
                          <div id="trans2" class="transs2">
                          <div class="traombr">
                          <h3>Calendrier photo</h3></div>
                          </div>
                          <div id="trans3" class="transs3">
                          <div class="traombr"><h3>Le mug photo</h3>
                          <ul>
                          <li>Comparez le prix</li></ul></div>
                          </div></div>

                          Est ce conventionnel ?

                          Je n'arrive toujours pas ce que cette propriete fonctionne :
                          .traombr *{
                          opacity:1;
                          margin:0;
                          padding:0;
                          }

                          Sinon le reste est il conventionnel ?
                          0
                          1. avion-f16
                            Tu dois mettre une classe commune à tous tes div !
                            Puis ensuite, pour les différencier afin de mettre une image différente, tu utilises des ID (uniques, évidemment).
                            0
                            1. jérémie
                              Je m'en sors pas je n'arrive pas a obtenir un rendu ...

                              Tu pourrais stp me détailler un peu plus la facon dont tu vois la chose ?

                              Je te remercie
                              0
                              1. avion-f16
                                Le css
                                .trans {
	width:133px;
	height:150px;
	padding-top:75px;
	background-repeat: no-repeat;
	float:left;
	margin:0 5px 0 0;
}
.trans div {
	height:60px;
	background-color:black;
	opacity:0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	color:white;
}
.trans div *{
	opacity:1.0;
	margin:0;
	padding:0;
}

#trans1 {
	background-image:url('image1.png');
}
#trans2 {
	background-image:url('image2.png');
}
#trans3 {
	background-image:url('image3.png');
}
                                Le XHTML :
                                <div id="trans1" class="trans">
	<div>
		<h3>Le livre photo</h3>
	</div>
</div>

<div id="trans2" class="trans">
	<div>
		<h3>Calendrier photo</h3>
	</div>
</div>

<div id="trans3" class="trans">
	<div>
		<h3>Le mug photo</h3>
		<ul>
			<li>Comparez le prix</li>
		</ul>
	</div>
</div>
                                0
                                1. jérémie
                                  Merci c'est sympa ! je viens de comprendre ou je déconnais !

                                  Par contre je n'arrive toujours pas a faire fonctionner la propriété :

                                  .trans div *{
                                  opacity:1.0;
                                  margin:0;
                                  padding:0;
                                  }

                                  regardez :

                                  http://www.developpementnumerique.com/

                                  Merci
                                  0
                              • 1
                              • 2

                              Discussions similaires

                              Retrouver l'image originale d'une photo modifiée
                              Raven

                              10 réponses
                              Mettre une image à l'arrière plan et la rendre transparente
                              Sss97

                              2 réponses