2

我从这里的一个答案中得到了说明，并得到了插入框阴影来处理身体标签。

这是现场示例： 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 中不起作用...

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;
}
4

1 回答 1

2

诀窍是将背景图像放入 html 标记中。

这个 css3 示例将为您提供一个很好的褪色背景下拉效果，否则即使在 css3 浏览器中也经常使用 24 位 png 图像创建 - 但是，这更容易。IE9、Firefox、Safari（适用于 Windows）中的 Testet。

在这里测试和尝试：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);
}
于 2013-04-08T20:46:24.167 回答