Fichier .swf en fond

**asphax** · 10/08/2013, 12h31

Bonjour,

j'ai une page web avec en fond une image en .png dans cette image il y a une partie qui est transparente et je souhaiterais mettre derrière cette partie une animation en flash pour qu'elle se voit uniquement au travers de cette partie si quelqu'un pourrait me donner la marche à suivre merci d'avance

**bob633** · 12/08/2013, 17h08

Montre déjà ton code voir comment tu as ajouté ton arrière plan dans ta page principale.

Sinon le z-index devrait t'aider

Suffit de superposer deux div avec cette propriété et ça devrait être bon.

**asphax** · 12/08/2013, 18h57

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
<!doctype html>
<html>
 
 
<head>
 
<meta charset="UTF-8">		
  <title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
 
</head>
 
<div class="ripple"></div>
 
<body>
 
 
 
<div id="flashTrip"></div>
 
<img src="images/bouton1.png" onclick="loadTrip('789');" alt="cliquez moi" title="cliquez moi"  id="img1" />
 
 
 
<script>
 
function loadTrip(nomDeAnimation)
{
 
   document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="right" data="http://www.play-the-ga.me/789.swf" width="400px" height="450px" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>';
 
}
 
</script>
 
 
 
</body>
</html>

voilà mon code html

**bob633** · 13/08/2013, 16h16

et ton css ?

**shores** · 13/08/2013, 18h53

bonsoir c'est quelque chose qui m' intéresse aussi j'attends de voir la réponse

**asphax** · 13/08/2013, 20h37

Voilà le css

Code css :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
body {
 
font-size: 10pt;
background-image: url("http://www.play-the-ga.me/images/8556.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-color: white;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
}
 
#img1 {
   position:relative;
  top:490px;
  left:1080px;
 
}
 
h1 {
 
}
.ripple,.ripple:before,.ripple:after {
  display:block;
  border-radius:2px;
  width:2px;
  height:2px;
  -webkit-animation:rip 10s 1;
  -moz-animation:rip 10s 1;
}
.ripple {
  position:absolute;
  z-index:-1;
  top:420px;
  left:400px;
}
.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}
.ripple:before {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;}
@-webkit-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 40px 300px transparent,
               0 0 10px 310px transparent,
               0 0 30px 320px transparent,
               0 0 5px 330px transparent;
  }
}
@-moz-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 40px 300px transparent,
               0 0 10px 310px transparent,
               0 0 30px 320px transparent,
               0 0 5px 330px transparent;
  }

Fichier .swf en fond

HTML

Vue hybride

Discussions similaires

Partager

Partager