CSS 背景图片 [英] CSS Background Image

问题描述

我正在为一位艺术家开展一个项目，该项目已在设计完成后传递给我.我收到了 .psd 文件中的设计，准确地说，大小是 huuuuuuuge 2504px x 1781px！

I'm working on a project for an Artist, the project has been passed to me as the design has been completed. I have receieved the design in a .psd file and the size is huuuuuuuge 2504px x 1781px to be exact!

由于上面有很多图案和渐变，我有点不确定如何设置图像.我已经把图片放到网上了，我认为最紧迫的事情是调整它的大小以适应更现代的屏幕尺寸.

As there are lots of patterns and gradients on it, I'm a little unsure as to how to set the image up. I have put the image up online, I think the first pressing thing is to resize it to suit more modern screen sizes.

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

The image is attached, Any help or suggestions on how to manage the image are much appreciated.

干杯

推荐答案

对于不同的纵横比，这不是一个非常灵活的设计，在宽屏显示器上拉伸它看起来不太漂亮.

That´s not a very flexible design for different aspect ratios, stretching it on a wide-screen monitor will not look pretty.

我可能会制作多个版本的图像(不同大小)，并使用 html5 和/或 javascript 技术向访问者提供正确的图像.

I would probably make multiple versions of the image (different sizes) and use html5 and / or javascript techniques to serve the right image to the visitor.

我不会将其用作背景图像，而是将其放在其余内容后面的 div 中，以便我可以将该 div 和图像缩放为 100% 宽.将其放置在左下角应该可以使最重要的部分(框架)始终清晰可见.

I would not use it as a background image but put it in a div behind the rest of the content so that I can scale that div and the image to be 100% wide. Positioning it in the bottom-left corner should make the most important part (the frame) always well visible.

我希望您不需要垂直位置的移动浏览器...

I hope for you that mobile browsers in a vertical position are not a requirement...

这篇关于CSS 背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！