Sujet Précédent Sujet Suivant

Zone gerise transparent sur image avec du tex

Fermé
Jérémie - 16 déc. 2009 à 16:34
 jérémie - 17 déc. 2009 à 20:32
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
A voir également:

21 réponses

  • 1
  • 2
Réponse 1 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
16 déc. 2009 à 16:40
En jouant avec les div c'est facilement faisable.
0
Réponse 2 / 21
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 128
16 déc. 2009 à 16:44
http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
0
Jérémie
16 déc. 2009 à 16:49
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
Réponse 3 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
16 déc. 2009 à 17:23
Je t'ai fais un petit tutoriel ici (c'est plus un exemple qu'un tuto, mais bon ...).
0
Réponse 4 / 21
jérémie
16 déc. 2009 à 18:32
Je n'y ai pas accès a la video ...

tu peux me le donner stp
0

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

Posez votre question
Réponse 5 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
16 déc. 2009 à 19:34
Ça y est : https://vimeo.com/8219938
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 128
17 déc. 2009 à 02:07
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
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497 > monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012
17 déc. 2009 à 07:12
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
Réponse 6 / 21
jérémie
17 déc. 2009 à 11:52
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
Réponse 7 / 21
phenX Messages postés 704 Date d'inscription mercredi 4 mai 2005 Statut Membre Dernière intervention 28 août 2012 23
17 déc. 2009 à 11:55
a titre indicatif pour tester sur toute les version de IE il y a IETESTER
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 128
17 déc. 2009 à 12:03
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
Réponse 8 / 21
jérémie
17 déc. 2009 à 13:59
Encore besoin d'un coup de main
0
Réponse 9 / 21
jérémie
17 déc. 2009 à 14:03
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
Réponse 10 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 déc. 2009 à 14:57
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
Réponse 11 / 21
jérémie
17 déc. 2009 à 15:13
Génial ! merci
0
Réponse 12 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 déc. 2009 à 15:15
Si c'est résolu coches le bouton prévu à cet effet.
0
Réponse 13 / 21
jérémie
17 déc. 2009 à 15:25
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
Réponse 14 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 déc. 2009 à 15:41
Il faut mettre la même classe pour tous les div.
Ensuite, tu fais comme ça : .taclass div *
0
Réponse 15 / 21
jérémie
17 déc. 2009 à 16:26
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
Réponse 16 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 déc. 2009 à 19:29
Avec les ID ...
0
Réponse 17 / 21
jérémie
17 déc. 2009 à 19:34
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
Réponse 18 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 déc. 2009 à 19:36
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
Réponse 19 / 21
jérémie
17 déc. 2009 à 20:02
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
Réponse 20 / 21
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 déc. 2009 à 20:10
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
jérémie
17 déc. 2009 à 20:23
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

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Comment faire le symbole coeur vide/coeur blanc
Paria -
2008G.C -

60 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
problème de pixel
bernie33260 -
contrariness -

14 réponses
Vidéo : comment changer sa zone géographique ?
azerty_42 -
tiloli -

8 réponses