Question

我从这里的一个答案中获取了指令，并且插入了盒子阴影来处理身体标签。

这是我拒绝的代码：

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 ......

Finnaly独自完成了一项工作。如果有人不需要解决方案：

这是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;
}

Answer 1

Trick是将背景图片放入html标签。

这个css3示例将为您提供漂亮的褪色背景下拉效果，否则通常使用24位png图像创建，即使在css3浏览器中 - 但是，这更容易。 Testet在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);
}

如何在IE9中使用插入阴影？

1 个答案: