我的背景图片有问题。
我有一个大小为 2538 x 559 像素的图像,无论窗口分辨率或大小如何,它都应该居中。背景图像应该有一个固定的大小,它不能缩放。图片中间是一个特定位置的文本表单,这就是图片不能缩放的原因。
如果我们的分辨率很小或者窗口变小了,中心应该仍然可见并且图像应该被左右切割。
我尝试了很多我浏览和发现的东西,但没有任何帮助。你能帮帮我吗?
提前非常感谢!
最佳答案
您必须将 background-position
设置为百分比:
body
{
height: 100%;
width: 100%;
background: url('path/to/file.png') no-repeat;
background-position: 50% 50%;
background-size: 1920px 1200px;
}
这确保它会占用容器宽度的百分比并始终将其显示在中心,切割图像的左侧和右侧。
要使背景图像始终保持相同大小,您应该使用 background-size:
属性。
请注意,这是一个 CSS3 属性,IE<9 将不支持它。
关于CSS3 背景图片 : centered and fixed size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13397468/