尽管屏幕分辨率如何,如何强制背景图片始终以屏幕为中心?

时间:2016-01-23 06:12:05

标签: html css image web

是否可以让我的背景图片的中心始终位于屏幕的中央,并且可以裁掉边以补偿分辨率?我目前正在使用背景图像:封面来裁剪边,而不考虑中间,但我希望我的图片中心的内容始终位于页面的中心。大多数情况下,我想这样做,以便移动看起来不错,但这样做也有助于使其更兼容设备。

desktop

上的内容

mobile上的样子。 (无视CF Lumen的色彩)

我希望女孩在所有设备上都位于屏幕中央。

2 个答案:

答案 0 :(得分:0)

您可以使用css属性background-position: center;

  

为了适应所有屏幕尺寸的背景,你必须这样做   保持图像的大小为background-size:100% 100%;或最佳   适合你。并停止重复使用后台background-repeat:no-repeat

上述设置会使图像设备与设备的显示不同,即在某些设备中图像看起来非常拉伸 所以Media Query将是一个理想的解决方案。

答案 1 :(得分:0)

如果您使用的是Bootstrap,那么您只需将CSS类“img-responsive”应用于背景图像。