html - 较小分辨率的背景图像

Question

我有一个 x1600 宽度的大背景图像。它非常适合 1600x900 屏幕。但是，当我将其更改为 1280x720 时，会修剪右侧的背景图像。使居中的幻灯片向右对齐。

我如何使它在左右两侧修剪，同时保持幻灯片居中。

Answer 1

background-position: center center;

这会将背景定位在中间，如果屏幕不够大，那么它将修剪所有需要的边。

但请记住，我的 1920x1200 屏幕会出现空白边缘。

Answer 2

采用

background-position: center center;

使图像居中。

background-size: cover;

将图像缩放到最大尺寸，使其宽度和高度都适合该区域，

background-size: contain;

将缩放背景图像，使其全部可见，并且

background-size: 100% 100%;

将图像拉伸到区域的宽度和高度。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

希望有帮助！

编辑：为了与旧浏览器兼容，请使用 、 和 指定相同-moz-background-size的-webkit-background-size值-o-background-size。请参阅背景尺寸 - MDN。