如何创建一个覆盖整个页面的框阴影？ [英] How to create a box-shadow that covers the entire page?
问题描述
我要找的最终结果是这样的：
the end result that I'm looking for is something like this:
http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg
这是使用此bkg标题生成的
Which was generated with this bkg title:
http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg
可以应用css3 box-shadow来获得所需的输出吗？
Is it possible to apply a css3 box-shadow to get the desired output?
我试过：
box-shadow: inset 0 0 490px black;
但只覆盖屏幕的一小部分。
But that only covers a small part of the screen.
感谢
推荐答案
确保您设置框阴影的任何元素具有100％的宽度和高度。这意味着所有祖先还必须具有100％的高度和宽度。因此，如果你想将它应用到 body ， html 也必须具有这些属性。
Make sure whatever element you set the box shadow to has 100% width and height. This means that all ancestors must also have 100% height and width. So if you want to apply it to body, html must also have those properties.
CSS：
html, body {
width:100%;
height: 100%;
}
body {
box-shadow: inset 0 0 490px black;
background: url('image.jpg');
}
要保持相同的阴影效果，即使在滚动时，阴影到包装器 div，然后应用 overflow：auto 。
To maintain the same shadow effect even when you scroll, apply the box shadow to a wrapper div and then apply 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;
}
这篇关于如何创建一个覆盖整个页面的框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
