2011-08-25 2 views
0

J'ai joué avec bloquer d'autres divs sur la presse bouton, et Block UI est un outil très sympa, mais il crée des blocs rectangulaires autour de divs qui ne semble pas vraiment bien, donc je étais si c'était possible de faites un bloc de type "champ de vision" avec jquery comme celui de l'image ci-dessous.Effet de type champ de vision?

enter image description here

Merci beaucoup :)

+0

Vous pouvez superposer une alpha avec un gradient .png radial. Vous pouvez également essayer d'utiliser les filtres CSS3 et IEs pour obtenir le même effet, mais cela deviendra probablement méchant. – William

+0

Hmm, si j'utilisais un PNG, comment pourrais-je compenser les différents types de résolutions d'écran? – pufAmuf

+0

Différentes résolutions d'écran peuvent être gérées avec un "cadre" de divs. Voir la réponse ci-dessous. –

Répondre

1

Ceci est simplement une question de faire une image alpha masquée (png). La clé est d'éviter de faire de la taille jumbo pour couvrir toute la page. Au lieu de cela faire un cadre de divs opaque (ou plus opaque) entourant le png du "trou". De cette façon, votre image ne doit pas être énorme et vous pouvez ajuster à n'importe quelle taille d'écran automatiquement. Le div parent serait de largeur/hauteur de 200%, ou si vous voulez avoir envie, vous pouvez simplement avoir la hauteur/largeur de 100%, et utiliser des maths fantaisie dans JS pour dimensionner dynamiquement les divs comme le port se déplace.

================ 
|  div  | 
================ 
|div| port |div| 
================ 
|  div  | 
================ 

Voir ma réponse à une question similaire ici:

CSS see through porthole

+0

Merci Jeff, je suppose que c'est à mon tour de commencer à expérimenter maintenant :) – pufAmuf