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

从长远来看，你可能会发现为你的lightsource添加一个包装元素会减少工作量。

Answer 2

我认为没有任何方法可以做到但你可以在你的标签之后添加一个div，它是100％x 100％的低z-index，并将CSS3应用于此。

我希望这就是你所说的。

在背景上构建CSS3模拟Lightsource

2 个答案: