Comment créer une zone d'ombre qui couvre la totalité de la page?

le résultat final que je suis à la recherche de quelque chose comme ceci:

http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg

Qui a été généré avec cette bkg titre:

http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg

Est-il possible d'appliquer un css3 box-shadow pour obtenir le résultat souhaité?

J'ai essayé:

box-shadow: inset 0 0 490px black;

Mais qui ne couvre qu'une petite partie de l'écran.

Grâce

Par curiosité, quelle taille de fichier est cette image? Qui a pris du temps à afficher, vous pouvez envisager la mise à l'échelle des images un peu, si seulement pour ceux d'entre nous sur les navigateurs mobiles.
c'est un super style, merci pour l'astuce.

OriginalL'auteur AnApprentice | 2012-08-03

  1. 10

    Assurez-vous que quelle que soit l'élément que vous définissez la zone d'ombre pour a 100% de la largeur et de la hauteur. Cela signifie que tous les ancêtres doivent également avoir 100% de la hauteur et la largeur. Donc, si vous voulez l'appliquer à body, html doit aussi avoir ses propriétés.

    CSS:

    html, body { 
    width:100%;
    height: 100%;
}
​
body {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
}

    JS Fiddle Exemple

    De maintenir le même effet d'ombre, même lorsque vous faites défiler, s'appliquent à la zone d'ombre à une wrapper div et ensuite appliquer overflow:auto.

    HTML:

    <html>
<body>
    <div id="wrapper"></div>
</body>
</html>

    CSS:

    html, body, #wrapper { 
    width:100%;
    height: 100%;
}

#wrapper {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
    overflow: auto;
}

    JS Fiddle Exemple

    C'est une meilleure réponse que la mienne
    Merci mais cela ne fonctionne pas comme lorsque l'emballage est l'ensemble de la fenêtre, l'ombre n'est pas au centre de la fenêtre
    Que ne fera pas une différence dans le produit final. Regarde ma mise à jour le tripote de l'image inclus.

    OriginalL'auteur JSW189

  2. 2

    Si j'ai bien compris c'est ce que vous cherchez: http://jsfiddle.net/RGWrC/

    Voici le code:

    html { 
    height: 100%;
}

body {
    min-height: 100%; 
    box-shadow: inset 0 0 490px black;
    background: url('whatever.jpg');
}

    Cela s'étend de l'arrière-plan de toute la hauteur de la page, encore, d'assurer un minimum égal à la fenêtre de la hauteur. Le CSS, je pense, est auto-explicatif.

    OriginalL'auteur banzomaikaka

  3. 1

    Je voudrais définir l'image comme le fond de la page, puis définir un conteneur avec des marges d'environ 100-200px (en fonction de comment vous voulez l'ombre) et de remplir cette marge avec un box-shadow sur div. Vous pouvez également définir la div à une position fixe (je crois) pour qu'il défile avec la page et de maintenir le même effet d'ombre

    Edit: réglage de l'image de la page html (ou corps) de fond permettra de résoudre le problème de l'image est trop petite, la div crée l'effet d'ombre que vous souhaitez

    OriginalL'auteur Jake Long

  4. 1

    Il y a une autre manière assez facile à faire effet similaire.
    Vous avez de l'envelopper le contenu de votre site avec des div qui ont boxshadow. Aussi la div doit avoir 100% de la largeur et de la hauteur, et posiation: absolute; Cela Vous donnera un bel effet evan lorsque Vous faites défiler la page.

    HTML

    <div class="shadow">

    <!-- ANY CONTENT GOES HERE -->
    <div>
        <h1>Content</h1>
    </div>
    <!-- ANY CONTENT GOES HERE -->

</div>

    CSS

    .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 400px #000000;
    box-shadow: inset 0px 0px 400px #000000;
}

    Exemple:
    http://jsfiddle.net/2GRGF/1/

    OriginalL'auteur none20

  5. 0

    Qu'avez-vous mis de l'ombre?
    Vous devez mettre le médaillon de l'ombre sur le corps, ou un élément qui a 100% de leur taille.

    L'image dans le lien a l'arrière-plan carré répété et puis un médaillon de l'ombre, sans doute sur le même élément qui s'étend sur la totalité de l'écran

    OriginalL'auteur Ivan Pintar

  6. 0

    avez-vous mis la mosaïque d'images comme arrière-plan de votre conteneur, et stertch le conteneur à travers l'écran? Alors je pense que le css vous suggèrent de travail. Peut-être essayer un violon...

    OriginalL'auteur Pevara