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

7ajki6be 于 2023-10-21 发布在其他

关注(0)|答案(7)|浏览(155)

我想要的最终结果是这样的
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: inset 0 0 490px black;

但这只是屏幕的一小部分。
谢谢

css

来源：https://stackoverflow.com/questions/11801790/how-to-create-a-box-shadow-that-covers-the-entire-page

7条答案

按热度按时间

2q5ifsrm1#

确保你设置的盒子阴影的任何元素都有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

赞(0）回复(0）举报 2023-10-21

yvfmudvl2#

如果我理解正确的话，这就是你要找的：http://jsfiddle.net/RGWrC/
代码如下：

html { 
    height: 100%;
}

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

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

赞(0）回复(0）举报 2023-10-21

3mpgtkmj3#

还有一个简单的方法可以达到类似的效果。你必须 Package 你的网站内容与div将有boxshadow。此外，div需要有100%的宽度和高度，以及位置：绝对;这将给给予你一个很好的效果埃文当你滚动页面。
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/

赞(0）回复(0）举报 2023-10-21

yvt65v4c4#

我有一个任务，使整个页面的阴影（为开放的CMS核心），并在最后我发现了一个巧妙而简单的解决方案：

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

赞(0）回复(0）举报 2023-10-21

eanckbw95#

我会将图像设置为页面背景，然后定义一个边距约为100- 200 px的容器（取决于你想要的阴影），并在该div上填充一个box-shadow。你也可以将div设置为一个固定的位置（我相信），这样它就可以随着页面滚动并保持相同的阴影效果
编辑：设置图像作为页面（html或body）背景将修复图像太小的问题，div创建你想要的阴影效果

赞(0）回复(0）举报 2023-10-21

envsm3lx6#

你把影子放在什么上面了？你应该把嵌入的阴影放在主体上，或者一个100%大小的元素上。
链接中的图像有重复的背景正方形，然后是一个插入的阴影，可能是在横跨整个屏幕的同一元素上

赞(0）回复(0）举报 2023-10-21

ctzwtxfj7#

你有没有把图片设置为容器的背景，并在屏幕上显示容器？那么我认为你建议的CSS应该工作。或许可以试试小提琴...

赞(0）回复(0）举报 2023-10-21