gpt4 book ai didi

html - 上的 box-shadow inset 仅在网站的可视部分有效

转载 作者:行者123 更新时间:2023-12-02 01:13:21 25 4
gpt4 key购买 nike

我在 html 元素上使用 box-shadow 来为网站背景提供浅色晕影效果。但是如果站点的内容比窗口长,box-shadow 将只显示在第一眼可见的站点部分。如果向下滚动,box-shadow 将停止工作。

这是我的 CSS 代码:

html {
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
height: 100%;
}

body {
font-family: "Source Sans Pro", sans-serif;
margin: 0;
background: url('../img/subtle_grunge.png');
}

我尝试将 box-shadow 应用于 body 元素,但这也不起作用。令人惊讶的是,为 body 设置的背景图片效果很好。该问题出现在所有浏览器中(Safari 6、Firefox 18、Chrome 24 – 全部在 Mac 上)。有解决办法吗?

这是一个例子:http://dreamapp.de/sites/portfolio/boxshadowproblem.html

enter image description here

最佳答案

你可以放一个<div><body> 之后标记并将 CSS 属性移动到它。如:

HTML

<body>
<div class="vignette"></div>
<!-- rest of your code -->

CSS

.vignette {
position: fixed;
/* to prevent empty space around the vignette */
top: 0;
left: 0;
/* extends to the whole visible area */
width: 100%;
height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}

以这种方式,该元素将位于所有其他元素之下,您可以滚动内容。

关于html - <html> 上的 box-shadow inset 仅在网站的可视部分有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14595435/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com