在后台构建CSS3模拟光源

Question

有没有一种方法可以在有背景图像的DIV上，然后在其上应用CSS3渐变来模拟光源？

我这样问的原因是因为我想让页面上的BODY标签使用重复的背景模式，在其上应用CSS3渐变光源，然后在所有页面内容所在的位置上粘贴一个白色的DIV.

对于那些没有CSS3的人来说，它将很好地降级为一个白色的DIV，在重复的背景上。

Answer 1

要做到这一点，只需要在body元素上组合使用multiple backgrounds、RGBA和radial gradients。对于那些不支持渐变的浏览器，您将需要一个带有单个重复背景的默认属性，然后是Gecko和Chrome/Safari have different syntax for the gradients，因此您需要为它们各自提供一个属性。应该以如下形式结束(未测试)：

body {
    background: url(repeat.jpg);
    background: -moz-radial-gradient(100px 100px, ellipse farthest-corner,   white 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0.5) 25%) no-repeat, url(repeat.jpg);
    background: -webkit-gradient(radial, 100 100, 200, from(#fffff), to(rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.5)) no-repeat, url(repeat.jpg);
}

从长远来看，你可能会发现为你的光源添加一个包装器元素的工作量更小。

Answer 2

我不认为有任何方法可以做到这一点，但你可以在你的标签后面添加一个100%乘100%的低z索引的div，并对其应用CSS3。

我希望这就是你所说的。