Zone gerise transparent sur image avec du tex

Jérémie -  
 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

  • 1
  • 2
  1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    En jouant avec les div c'est facilement faisable.
    0
  2. monkey_monk Messages postés 611 Date d'inscription   Statut Membre Dernière intervention   132
     
    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
  3. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Je t'ai fais un petit tutoriel ici (c'est plus un exemple qu'un tuto, mais bon ...).
    0
  4. jérémie
     
    Je n'y ai pas accès a la video ...

    tu peux me le donner stp
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Ça y est : https://vimeo.com/8219938
    0
    1. monkey_monk Messages postés 611 Date d'inscription   Statut Membre Dernière intervention   132
       
      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
      1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511 > monkey_monk Messages postés 611 Date d'inscription   Statut Membre Dernière intervention  
         
        Je 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
  7. 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
  8. phenX Messages postés 463 Date d'inscription   Statut Membre Dernière intervention   23
     
    a titre indicatif pour tester sur toute les version de IE il y a IETESTER
    0
    1. monkey_monk Messages postés 611 Date d'inscription   Statut Membre Dernière intervention   132
       
      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
  10. 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
  11. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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
  13. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Si c'est résolu coches le bouton prévu à cet effet.
    0
  14. 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
  15. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Il faut mettre la même classe pour tous les div.
    Ensuite, tu fais comme ça : .taclass div *
    0
  16. 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
  17. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Avec les ID ...
    0
  18. 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
  19. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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
  20. 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
  21. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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 -
Asta972155 -

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

2 réponses