Affichage d'un contenu cliquable derrière un background "troué"

**juliothebassman** · 05/03/2016, 10h34

Bonjour,

Je suis entrain de réalisé un site pour un groupe de musique qui a pour logo une chouette.

Je souhaiterais affiché une image au format PNG qui aurait un "trou" de la forme de la dite chouette qui laisserait voir le contenu d'un conteneur glissé derrière l'image. L'idée est donc que le contenu soit visible dans le trou chouette et se cache quand il dépasse le bord du trou.

J'ai commencé à coder un truc qui marche moyennement, je superpose mes conteneurs via un z-index ce qui a pour effet de superposer mon fond et mon conteneur l'un sur l'autre et mon contenu défile sans problème et n'est visible qu'au travers du trou chouette.
Le problème c'est que du coup mes liens ne sont plus cliquable et donc mon contenu se retrouve figé.

Y'a t-il un moyen de pouvoir laissé actif le conteneur ayant mon contenu tout en le planquant derrière l'image afin qu'il n'apparaisse qu'au travers du trou chouette ?

Merci d'avance pour votre aide,

Voici mon fichier dans lequel j'appelle mes conteneurs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
	<div id=fond></div>
	<header id=div1>
		<?php include ('menu.php');?>	
	</header>
 
	<div id=frame>
		Ici le contenu à afficher
	</div>
<div id=cover>
</body>

et mon fichier css :

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
 
#fond{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(images/bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	z-index: 1;
}
#cover{
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(images/bg3.Png);
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	z-index: 3;
}
#frame{
	position: relative;
	top: 0px;
	left: 0;
	right:0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	overflow: auto;
	text-align: center;
	padding-top: 120px;
	padding-bottom: 120px;
	z-index: 2;
}

**NoSmoking** · 12/03/2016, 14h59

Bonjour,
si tu n'es pas trop exigeant avec la compatibilité tu peux regarder du coté de pointer-events: none.
avec le html suivant

Code :

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

1
2
3
<div id="main" onclick="alert('bingo!!!')">
  <div id="div_trou"></div>
</div>

et le CSS

Code :

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

1
2
3
4
5
6
7
8
#div_trou {
  pointer-events: none;
  width:20em;
  height:20em;
  border-radius:50%;
  background:#abc;
  opacity:.3;
}

le "Bingo !!! doit apparaitre et si il y a un lien celui ci suivra.

Affichage d'un contenu cliquable derrière un background "troué"

CSS

Discussions similaires

Partager

Partager