Zone gerise transparent sur image avec du tex

Question

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

avion-f16 · Answer

En jouant avec les div c'est facilement faisable.

monkey_monk · Answer

http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children

avion-f16 · Answer

Je t'ai fais un petit tutoriel ici (c'est plus un exemple qu'un tuto, mais bon ...).

jérémie · Answer

Je n'y ai pas accès a la video ...

tu peux me le donner stp

avion-f16 · Answer

Ça y est : https://vimeo.com/8219938

jérémie · Answer

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)";

phenX · Answer

a titre indicatif pour tester sur toute les version de IE il y a IETESTER

jérémie · Answer

Encore besoin d'un coup de main

jérémie · Answer

Encore besoin d'un coup de main, ayant 3 images à traiter j'ai fait cela et ca fonctionne : HTML :

Text

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

avion-f16 · Answer

Tu peux utiliser les classes.
Sur chacun des div représentant une image, tu lui mets une classe (en supplément de l'id).

jérémie · Answer

Génial ! merci

avion-f16 · Answer

Si c'est résolu coches le bouton prévu à cet effet.

jérémie · Answer

Nop encore un petit truc, en faite ca donne ca : HTML

Le livre photo

Calendrier photo

Le mug photo

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 !

avion-f16 · Answer

Il faut mettre la même classe pour tous les div.
Ensuite, tu fais comme ça : .taclass div *

jérémie · Answer

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 ?

avion-f16 · Answer

Avec les ID ...

jérémie · Answer

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 :

Le livre photo

Calendrier photo

Le mug photo

Comparez le prix

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 ?

avion-f16 · Answer

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).

jérémie · Answer

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

avion-f16 · Answer

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 :

Le livre photo

Calendrier photo

Le mug photo

Comparez le prix

avion-f16 · Answer

.trans div *{
	opacity:1.0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	margin:0px;
	padding:0px;
}

Zone gerise transparent sur image avec du tex

21 réponses

Votre réponse

Discussions similaires

Newsletters