Question

我正在寻找的最终结果是这样的：

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;

但这仅涵盖了屏幕的一小部分。

由于

Answer 1

确保您设置框阴影的任何元素都具有100％的宽度和高度。这意味着所有祖先也必须具有100％的高度和宽度。因此，如果您要将其应用于body，html也必须具有这些属性。

<强> CSS：

html, body { 
    width:100%;
    height: 100%;
}

body {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
}

JS Fiddle Example

要在滚动时保持相同的阴影效果，请将框阴影应用于wrapper div，然后应用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;
}

JS Fiddle Example

Answer 2

如果我理解正确，这就是你要找的东西：http://jsfiddle.net/RGWrC/

以下是代码：

html { 
    height: 100%;
}

body {
    min-height: 100%; 
    box-shadow: inset 0 0 490px black;
    background: url('whatever.jpg');
}

这将背景扩展到页面的整个高度，仍然确保最小值等于窗口的高度。我认为，CSS是不言自明的。

Answer 3

我将图像设置为页面背景，然后定义一个边距约为100-200px的容器（取决于你想要的阴影）并在该div上填充一个盒子阴影。您也可以将div设置为固定位置（我相信），以便它将与页面一起滚动并保持相同的阴影效果

编辑：将图像设置为页面（html或正文）背景将解决图像太小的问题，div会创建您想要的阴影效果

Answer 4

还有另一种非常简单的方法可以做类似的效果。你必须使用带有boxshadow的div包装你的网站内容。 div也需要有100％的宽度和高度，并且posiation：absolute;当你滚动页面时，这将给你一个很好的效果。

HTML

<div class="shadow">

    <!-- ANY CONTENT GOES HERE -->
    <div>
        <h1>Content</h1>
    </div>
    <!-- ANY CONTENT GOES HERE -->

</div>

CSS

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 400px #000000;
    box-shadow: inset 0px 0px 400px #000000;
}

实施例： http://jsfiddle.net/2GRGF/1/

Answer 5

你把阴影放在了什么位置？您应该将插入阴影放在正文上，或者放置100％大小的元素。

链接中的图像重复了背景方块，然后是一个插入阴影，可能位于跨越整个屏幕的同一元素上

Answer 6

您是否将图片图块设置为容器的背景，并在屏幕上拉伸容器？然后我认为你建议的CSS应该工作。也许试试小提琴......

Answer 7

整个页面上的阴影！

box-shadow: 0 0 0 100000px rgba(0,0,0,.2);

如何创建覆盖整个页面的盒子阴影？

7 个答案: