CSS背景图片

Question

我正在为一个艺术家的项目工作，该项目已经传递给我，因为设计已经完成。我收到了一个.psd文件的设计，大小是huuuuuuuge 2504px x 1781px准确！

由于上面有很多图案和渐变，我对如何设置图像有些不确定。我已经把图像上线了，我认为第一件紧迫的事情是调整它以适应更现代的屏幕尺寸。

附有图片，非常感谢任何有关如何管理图片的帮助或建议。

干杯

Answer 1

你可以将图像分成（'旧式'方式）部分（在一个glace，一个标题，一个右列，一个页脚）并使用'作为div的背景图像。我建议使用photoshop内置功能“为网站保存”来优化图像（如Jpeg）以获得最佳比例'小文件 - 最佳外观'（类似中等（50或60）质量，多通道otpimization和1000 px宽度）。 这个如果你想保持固定的布局..

Answer 2

该网站的解决方案是什么？

我发现将图像大小调整为1280像素宽（911像素高）可以很好地适用于1024x768的浏览器窗口大小，这几乎是任何人最近使用的最小值。

使用这个CSS：

body {
    background-image: url('/path/to/your/background.png');
    background-position: left bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
}

..图片的主要部分（持有框架的人）将始终在视野中，较大的浏览器视口将获得更多的图片的顶部和右部。

但是：任何拥有1280像素以上浏览器的人都会看到纯黑色背景。

编辑：还有CSS3属性background-size: 100%;，它会自动缩小/拉伸图像以适应浏览器视口。

更新：我发现PNG-8为我提供了上面提到的分辨率的最佳质量和文件大小。它的容量为280KB，而质量相当的JPG则为330KB。

Answer 3

对于不同的宽高比而言，这不是一个非常灵活的设计，在宽屏显示器上拉伸它看起来不会很漂亮。

我可能会制作多个版本的图片（不同尺寸），并使用html5和/或javascript技术为访问者提供正确的图片。

我不会将它用作背景图片，而是将其放在div后面的其他内容中，以便我可以缩放该div并将图像缩放为100％。将其放置在左下角应该使最重要的部分（框架）始终可见。

我希望您处于垂直位置的移动浏览器不是必需的......

Answer 4

考虑使用与图像具有相同宽高比的固定大小布局，并将图像调整为与布局相同的尺寸。然后，您可以将背景颜色设置为与图像相同的黑色或补色。

大多数计算机显示器的布局大约为1000px * 700px。

如果您必须拥有灵活的布局，那么如果您可以分离图像的组件（您是否拥有所有图层，那将是非常好的）。即框架/人物，角落的红色花卉图案，以及带有交叉带的背景。

然后使用几个div和一些javascript，使框架和指针保持锁定在相对于左下角的位置，花卉设计总是倾向于四个角落，背景移动，以便将框架保持在黑暗的对角线区域;沿红色带向上和向右滑动。 （我可以在脑海中看到它很难描述。）