我正在寻找的最终结果是这样的:
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)
若要在滚动时保持相同的阴影效果,请将框阴影应用于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)