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.

fade sur une image de fond en css

jQuery

Vue hybride

Discussions similaires

Partager

Partager