Html 上的框阴影插入仅在网站的可视部分起作用_Html_Browser_Css

Html 上的框阴影插入仅在网站的可视部分起作用

html browser css

Html 上的框阴影插入仅在网站的可视部分起作用,html,browser,css,Html,Browser,Css,我在html元素上使用了框阴影，给网站的背景带来了一种轻微的晕影效果。但是，如果站点内容比窗口长，框阴影将仅显示在第一眼就能看到的站点部分。如果向下滚动，长方体阴影将停止工作以下是我的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;

我在html元素上使用了框阴影，给网站的背景带来了一种轻微的晕影效果。但是，如果站点内容比窗口长，框阴影将仅显示在第一眼就能看到的站点部分。如果向下滚动，长方体阴影将停止工作

以下是我的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');
}

我尝试将长方体阴影应用于body元素，但这也不起作用。令人惊讶的是，为身体设置的背景图像效果很好。这个问题出现在所有浏览器Safari 6、Firefox 18、Chrome 24中——所有浏览器都在Mac上。有解决办法吗

以下是一个例子：

去除高度：100%；从html标记中选择样式。或者，您可以将其更改为最小高度：100%

您可以在标记后面放置一个右键，然后将CSS属性移到该右键。例如：

HTML

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

您可以在标记后面加一个右键，然后将CSS属性移到该标记处。例如：

HTML

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

您尝试过最小高度：100%吗？或者干脆把它全部去掉？你试过最小高度：100%吗？或者干脆把它全部移走？很遗憾，这行不通。如果我这样做，框阴影将只显示在身体所在的区域。如果主体比窗口短，则长方体阴影将停止在主体的末端。奇怪的是，在身体中定义的背景图像显示在整个侧面……遗憾的是，这不起作用。如果我这样做，框阴影将只显示在身体所在的区域。如果主体比窗口短，则长方体阴影将停止在主体的末端。奇怪的是，在身体上定义的背景图像显示在整个侧面…太棒了！这就像一个符咒…这太容易了！谢谢-令人惊叹的这就像一个符咒…这太容易了！谢谢-

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

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