如何创建覆盖整个页面的盒子阴影?

AnA*_*ice 6 css html5 css3

我正在寻找的最终结果是这样的:

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

这是用这个bkg标题生成的:

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

是否可以应用css3 box-shadow来获得所需的输出?

我试过了:

box-shadow: inset 0 0 490px black;
Run Code Online (Sandbox Code Playgroud)

但这仅涵盖屏幕的一小部分.

谢谢

JSW*_*189 11

确保您设置框阴影的任何元素都具有100%的宽度和高度.这意味着所有祖先也必须具有100%的高度和宽度.所以,如果你想申请它body,html也必须有这些属性.

CSS:

html, body { 
    width:100%;
    height: 100%;
}
?
body {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
}
Run Code Online (Sandbox Code Playgroud)

JS小提琴示例


若要在滚动时保持相同的阴影效果,请将框阴影应用于wrapperdiv,然后应用overflow:auto.

HTML:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

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

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

JS小提琴例


Iva*_*tar 0

你把影子贴在什么上了?您应该将嵌入阴影放置在主体上,或者放置在具有 100% 大小的元素上。

链接中的图像重复了背景方块,然后插入了阴影,可能位于跨越整个屏幕的同一元素上