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％;”

box-shadow inset仅适用于网站的可视部分

2 个答案: