代码之家 › 专栏 › 技术社区 › Volomike nbk

在后台建立CSS3模拟光源

gradient css3 xhtml html

0

Volomike nbk · 技术社区 · 16 年前

有没有办法取一个有背景图像的DIV,然后在它上面应用CSS3渐变来模拟光源?

我之所以问这个问题是因为我想让页面上的body标签使用一个重复的背景模式,在上面应用css3渐变光源,然后在上面粘贴一个白色的DIV,所有页面内容都会放到那里。

对于那些没有CSS3的人,它会很好地退化为重复背景之上的一个白色分区。

2 回复 | 直到 16 年前

1

4

robertc 16 年前

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

您可能会发现,从长远来看,为您的光源添加一个包装器元素的工作要少得多。

2

0

Taylor Satula 16 年前

我不认为有任何方法可以做到,但是你可以在标签后添加一个DIV,这个DIV是100%乘以100%,低z索引,然后将CSS3应用到这个上面。

我希望这就是你所说的。