如何创建一个覆盖整个页面的框阴影? [英] 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屋!