Question

好吧，基本上我在photoshop中创建了一个设计，它有一个带有居中径向渐变的噪声背景（创造一些光）在CSS中创建这个并在所有浏览器中支持的最佳方法是什么？

Answer 1

以下主题回答了这个问题：Adding images when CSS gradients are used?

总结一下：你应该只使用一个图像，如果你需要加载图像，在图像中包含更多信息（即径向渐变以及噪声）比叠加两个图像更简单由于尚未最终确定的css3标准的复杂性以及不支持多种背景的非webkit浏览器。

Answer 2

<style>
#element {
    background: url("10x10pxnoiseimage.png") repeat, -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
    background: url("10x10pxnoiseimage.png") repeat, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: url("10x10pxnoiseimage.png") repeat, -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: url("10x10pxnoiseimage.png") repeat, -o-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
    background: url("10x10pxnoiseimage.png") repeat, -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* IE10+ */
    background: url("10x10pxnoiseimage.png") repeat, radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* W3C */
}
</style>

<!--[if lt IE 9]>
<style>
#element {
    background: url("bigimage.png");
}
</style>
<![endif]-->

“10x10pxnoiseimage.png”是透明的，有几个白色/灰色/黑色像素。
你也可以决定起诉css3pie，这样你也可以使用这些新的 IE8 / 7/6中的图像标签。
径向虚拟梯度取自： http://www.colorzilla.com/gradient-editor/

如果你把图像发给我，我可以为你制作一个虚拟的html ^^

Answer 3

有一个名为background-size的CSS3属性，它基本上允许背景图像在容器中伸展。但是，它仍然没有被普遍接受。
由于您只能使用一个背景图像（当前），因此我知道有两个选项：
1）使用图像标签，因为如果图像的高度和宽度为100％，图像将拉伸以填充容器，然后您可以创建内部容器（对于内容），将其位置设置为绝对，并将其顶部/左侧属性设置为0，并给它一个高于图像的z指数。任何大于1的数字都应该有效。这会将容器放在图像上方，并解决您的问题。但是，根据容器的尺寸，图像将被大大拉伸。
2）使用3张图像：图像左侧为1，右侧为1，中间部分为1。 Float 3 divs，使用第一个和第三个图像作为第一个和第三个div的背景。使用第二个图像作为中间div的背景。您的图像看起来如何无缝取决于您如何剪切它。
那些应该很好地工作。

CSS多重背景（图像和渐变）

3 个答案: