Sujet Précédent Sujet Suivant

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
A voir également:

21 réponses

  • 1
  • 2
Réponse 1 / 21
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
En jouant avec les div c'est facilement faisable.
0
Réponse 2 / 21
monkey_monk Messages postés 681 Statut Membre 131
 
http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
0
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
Réponse 3 / 21
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
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
 
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 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Ça y est : https://vimeo.com/8219938
0
monkey_monk Messages postés 681 Statut Membre 131
 
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 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510 > monkey_monk Messages postés 681 Statut Membre
 
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
 
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 734 Statut Membre 23
 
a titre indicatif pour tester sur toute les version de IE il y a IETESTER
0
monkey_monk Messages postés 681 Statut Membre 131
 
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
 
Encore besoin d'un coup de main
0
Réponse 9 / 21
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
Réponse 10 / 21
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
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
 
Génial ! merci
0
Réponse 12 / 21
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Si c'est résolu coches le bouton prévu à cet effet.
0
Réponse 13 / 21
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
Réponse 14 / 21
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
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
 
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 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Avec les ID ...
0
Réponse 17 / 21
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
Réponse 18 / 21
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
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
 
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 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
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
 
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

PIX
plart -
jordane45 -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Original photo
aide -
viagers -

1 réponse
problème de pixel
bernie33260 -
contrariness -

14 réponses