有没有办法获取上面带有背景图像的DIV,然后对其应用CSS3渐变以模拟光源?

我问的原因是因为我正在考虑使页面上的BODY标签使用重复的背景图案,在其上应用CSS3渐变光源,然后在所有页面内容都可以粘贴的地方上面贴上白色DIV。

对于没有CSS3的用户,在重复的背景之上,它将很好地退化为白色DIV。

最佳答案

要仅在body元素上执行此操作,就必须组合multiple backgroundsRGBAradial 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);
}


从长远来看,您可能会发现为光源添加包装元素的工作量较小。

10-07 19:19
查看更多