我按照此处答案之一的说明进行操作，并让 inset box-shadow 可以在 body 标记上工作。
这是一个实例:http://nemokamamuzika.lt
这是我所使用的代码:
html, body {
width:100%;
height: 100%;
}
body {
box-shadow: inset 0 0 1000px 30px black;
background: url('http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg');
}
但是......它无法在“喜爱的”浏览器 Internet Explorer 9 中工作......
终于我自己找到了解决方法。如果有人需要解决方案:
这是 html:
<body>
<div id="shadow">
<div id="padding">
<div id="content">
</div></div></div></body>
这是CSS:
html {
height: 100%;
}
body {
height:100%;
min-height: 100%;
background-image: url('/wp-content/uploads/someimage.jpg');
background-attachment: scroll;
background-repeat: repeat;
}
#shadow {
width: 100%;
min-height: 100%;
margin: 0 auto;
box-shadow: inset 0 0 400px 50px black;
}
#padding{
width: 100%;
min-height: 100%;
margin: 0 auto;
padding: 30px 0 30px 0;
}
最佳答案
技巧是将背景图像放入 html 标签中。
这个 css3 示例将为您提供漂亮的褪色背景下拉效果，否则即使在 css3 浏览器中也经常使用 24 位 png 图像创建 - 然而，这更容易。在 IE9、Firefox、Safari(适用于 Windows)中进行测试。
在这里测试并尝试:http://jsfiddle.net/LUDJF/
html {
width:100%;
height:100%;
background:url('http://www.sequelsite.dk/mediafiles/sequelsite/white-grid-paper-background-pattern.jpg');
}
body {
margin:0;
padding:0;
width:100%;
height:100%;
box-shadow : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
-webkit-box-shadow: inset 0px 3000px 3000px -2800px rgba(255,0,0,0.5);
-moz-box-shadow : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
-o-box-shadow : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
}
关于html - 如何让 <body> 插入阴影在 IE9 中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14379893/