CSS 背景图片 -> 使用图片答案

【问题标题】：CSS background Image -> Using an imageCSS 背景图片 -> 使用图片
【发布时间】：2012-01-15 08:56:25
【问题描述】：

我正在使用下面的图片，但我按原样使用它，它并没有占据 100% 的屏幕。

我已经考虑了以下选项，但我希望能提供一些关于如何操作的建议：

制作木纹瓷砖？
创建一条木纹？

当前 CSS

html{
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll;
    background-color:#0C0C0C;
    height:100%;
    width:100%;
}

图片

【问题讨论】：

标签： css image background

【解决方案1】：

将background-size: 100% 100%; 添加到html 并将repeat-x 更改为no-repeat。

演示：http://jsfiddle.net/ThinkingStiff/jUr9E/

html{
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    background-color:#0C0C0C;
    background-size: 100% 100%;
    height:100%;
    width:100%;
}

【讨论】：

【解决方案2】：

使用条带将为您提供带宽增益，同时仍保留一些质量度量，而使用具有 x-y 重复的图块将降低质量并为您提供更高的带宽保留。

【讨论】：

【解决方案3】：

首先，移除源图像上的径向渐变。然后创建一个带有一些板条的条带，这样重复时看起来很自然。要重现渐变，请使用css3 radial gradient background。如果需要旧版浏览器支持，请包含渐变的透明 png 作为后备。

【讨论】：