1

我使用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

在此处输入图像描述

4

2 回答 2

4

您可以<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;
}

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

于 2013-01-30T02:06:30.567 回答
1

去掉“高度：100%；” 来自您的 html 标记的样式。或者，您可以将其更改为“最小高度：100%；”

于 2013-01-30T02:05:53.850 回答