Question

我的背景图片有问题。

我有一个尺寸为2538 x 559像素的图像，无论窗口分辨率或大小如何都应居中。背景图像应具有固定大小，不得缩放。在图像的中间是特定位置的文本形式，这就是图像不能缩放的原因。

如果我们的分辨率很小或者窗口变小，则中心仍应可见，图像应左右切割。

我尝试了很多我浏览过的东西，没有任何帮助。你能帮我吗？

提前非常感谢！

Answer 1

您必须将background-position设置为百分比：

body
{
    height: 100%;
    width: 100%;
    background: url('path/to/file.png') no-repeat;
    background-position: 50% 50%;
    background-size: 1920px 1200px;
}

这可确保它占据容器宽度的一定百分比，并始终将其显示在中心，从而切割图像的左右两侧。

为了使bg图像始终保持相同的大小，您应该使用background-size:属性。

请注意，这是一个CSS3属性，IE＆lt; 9将不支持它。

http://jsfiddle.net/Kyle_Sevenoaks/QY5NQ/

Answer 2

你试过了吗？

background-position: center;
background-size: 2538px 559px;

CSS3背景图像：居中和固定大小

2 个答案: