<html> 上的框阴影插入仅适用于网站的可见部分

Question

我在

box-shadow

元素上使用

html

为网站的背景提供浅色晕影效果。但如果网站的内容比窗口长，则

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

Answer 1

您可以在

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

这样该元素将保留在所有其他元素下方，并且您可以滚动内容。

Answer 2

删除“高度：100%；” html 标签中的样式。或者，您可以将其更改为“min-height: 100%;”

Answer 3

我发现无论页面尺寸如何，这都更加一致

.vignette {
    min-height: 100%;
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

为了使用它，我更喜欢将其添加到 html 标签中

<html class="vignette">
<!-- your site here -->
</html>

<html> 上的框阴影插入仅适用于网站的可见部分

问题描述投票：0回答：3

3个回答

最新问题

<html> 上的框阴影插入仅适用于网站的可见部分

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3