Html 如何创建一个覆盖整个页面的框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11801790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a box-shadow that covers the entire page?
提问by AnApprentice
the end result that I'm looking for is something like this:
我正在寻找的最终结果是这样的：
http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg
http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg
Which was generated with this bkg title:
这是用这个 bkg 标题生成的：
http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg
http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg
Is it possible to apply a css3 box-shadow to get the desired output?
是否可以应用 css3 box-shadow 来获得所需的输出？
I tried:
我试过：
box-shadow: inset 0 0 490px black;
But that only covers a small part of the screen.
但这仅覆盖了屏幕的一小部分。
Thanks
谢谢
回答by JSW189
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, htmlmust also have those properties.
确保您设置框阴影的任何元素具有 100% 的宽度和高度。这意味着所有祖先也必须具有 100% 的高度和宽度。所以如果要将其应用到body，html还必须具备那些属性。
CSS:
CSS：
html, body {
width:100%;
height: 100%;
}
?
body {
box-shadow: inset 0 0 490px black;
background: url('image.jpg');
}
To maintain the same shadow effect even when you scroll, apply the box shadow to a wrapperdiv and then apply overflow:auto.
要在滚动时保持相同的阴影效果，请将框阴影应用到wrapperdiv 然后应用overflow:auto。
HTML:
HTML：
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS:
CSS：
html, body, #wrapper {
width:100%;
height: 100%;
}
#wrapper {
box-shadow: inset 0 0 490px black;
background: url('image.jpg');
overflow: auto;
}
? ? JS小提琴示例
回答by banzomaikaka
If I understood correctly this is what your looking for: http://jsfiddle.net/RGWrC/
如果我理解正确，这就是你要找的：http: //jsfiddle.net/RGWrC/
Here's the code:
这是代码：
html {
height: 100%;
}
body {
min-height: 100%;
box-shadow: inset 0 0 490px black;
background: url('whatever.jpg');
}
This extends the background to the full height of the page, still, ensuring a minimum equal to the window's height. The CSS, I think, is self-explanatory.
这将背景扩展到页面的整个高度，仍然确保最小值等于窗口的高度。我认为 CSS 是不言自明的。
回答by none20
There is another pretty easy way to do similar effect. You have to wrap your website content with div that will have boxshadow. Also the div needs to have 100% width and height, and posiation: absolute; This will give You a nice effect evan when You scroll the page.
还有另一种非常简单的方法可以实现类似的效果。您必须使用具有 boxshadow 的 div 包装您的网站内容。此外，div 需要有 100% 的宽度和高度，以及 posiation: absolute; 当你滚动页面时，这会给你一个很好的效果。
HTML
HTML
<div class="shadow">
<!-- ANY CONTENT GOES HERE -->
<div>
<h1>Content</h1>
</div>
<!-- ANY CONTENT GOES HERE -->
</div>
CSS
CSS
.shadow {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 400px #000000;
box-shadow: inset 0px 0px 400px #000000;
}
Example: http://jsfiddle.net/2GRGF/1/
回答by Jake Long
I would set the image as the page background, then define a container with margins of about 100-200px (depending on how you want the shadow) and fill in this margin with a box-shadow on that div. You could also set the div to a fixed position (I believe) so that it will scroll with the page and maintain the same shadow effect
我会将图像设置为页面背景，然后定义一个边距约为 100-200 像素（取决于您想要阴影的方式）的容器，并在该 div 上用框阴影填充此边距。您还可以将 div 设置为固定位置（我相信），以便它随页面滚动并保持相同的阴影效果
Edit: setting the image as the page (html or body) background will fix the problem of the image being too small, the div creates the shadow effect that you want
编辑：将图片设置为页面（html或body）背景将修复图片太小的问题，div创建了你想要的阴影效果
回答by Ivan Pintar
What did you put the shadow on? You should put the inset shadow on the body, or an element that has 100% size.
你把阴影放在什么上面了？您应该将插入阴影放在主体或具有 100% 大小的元素上。
The image in the link has the background square repeated and then an inset shadow, probably on the same element that spans across the entire screen
链接中的图像具有重复的背景方块，然后是插入阴影，可能在跨越整个屏幕的同一元素上
回答by Pevara
did you set the image tile as a background of your container, and stertch the container across the screen? Then i think the css you suggest should work. Perhaps try a fiddle...
您是否将图像图块设置为容器的背景，并在屏幕上拉伸容器？然后我认为您建议的 css 应该可以工作。也许尝试小提琴......
