fade sur une image de fond en css

link.80 · 05/09/2011, 13h32

Bonjour, j'aimerais appliquer un effet fade sur une image de fond en css.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
JQUERY :
$(document).ready(function() {
	$("#overall").fadeTo(0, 0);
});
$(window).load(function() {   
        $("#overall").fadeTo(1500, 1);
});
 
CSS:
#overall {background:url(images/bg1.jpg) no-repeat center 320px;}

le problème avec ça, c'est que ca me fade toute ma div#overall, comment juste sélectionner l'image de fond qui est déclarrée dans les css ?

d'avance, merci pour votre aide et bonne journée à tous

Shikiryu · 05/09/2011, 14h52

On ne peut pas faire un fade sur une image de background.

danielhagnoul · 06/09/2011, 01h45

Bonsoir

Avec les navigateurs récents (IE9 et mieux), on peut jouer avec rgba().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		a {-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#ffffff; color:#000000; border:1px solid #666666; }
		footer {margin-left:36px; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-09-06T01:35:00.000+02:00" pubdate>2011-09-06</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script>
		$(function(){
			var obj1 = $("body"),
				obj2 = $(".conteneur"),
				i = 1, // alpha 100%
				objInterval = setInterval(function(){
					if (i > 0.04){ // alpha 4%
						obj1.css('background-color', 'rgba(0, 0, 255, ' + i + ')');
						obj2.css('background-color', 'rgba(255, 0, 0, ' + i + ')');
						i -= 0.02; // -2%
					} else {
						clearInterval(objInterval);
					}
				}, 33); // 0.033s
		});
	</script>
</body>  
</html>

Shikiryu · 06/09/2011, 08h26

Oui, mais ça ne fonctionne qu'avec les couleurs et pas les images comme demandé...
Il y a toujours la possibilité de mettre une image (<img>) sous une <div> grâce à des positionnements relatifs et absolus, puis effectuer un fade sur l'image. Mais c'est bancal et ce n'est pas fait pour.

Quoi qu'il en soit, beaucoup de personnes ont voulu cette fonctionnalité et tous ceux que je connais qui ont réussi, ont compris que le résultat est moche et n'apporte pas grand chose.

05/09/2011, 14h52	#2
Shikiryu Membre chevronné Développeur Web Inscription : mars 2011 Messages : 399 Détails du profil Informations personnelles : Sexe : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : mars 2011 Messages : 399 Points : 662 Points : 662	On ne peut pas faire un fade sur une image de background. __________________ Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery. Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels. Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...
	00

06/09/2011, 08h26	#4
Shikiryu Membre chevronné Développeur Web Inscription : mars 2011 Messages : 399 Détails du profil Informations personnelles : Sexe : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : mars 2011 Messages : 399 Points : 662 Points : 662	Oui, mais ça ne fonctionne qu'avec les couleurs et pas les images comme demandé... Il y a toujours la possibilité de mettre une image (<img>) sous une <div> grâce à des positionnements relatifs et absolus, puis effectuer un fade sur l'image. Mais c'est bancal et ce n'est pas fait pour. Quoi qu'il en soit, beaucoup de personnes ont voulu cette fonctionnalité et tous ceux que je connais qui ont réussi, ont compris que le résultat est moche et n'apporte pas grand chose. __________________ Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery. Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels. Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email