垂直中心我的背景图像

Question

我尝试将我的背景垂直居中于div。 为了更好的理解，我做了一个shema，我无法发布图片，因为我没有声名，但我发布了链接

这就是我现在所拥有的：http://i.gyazo.com/ea592cf13659c85acad770abecb7faaf.png 唯一的问题是，你可以看到，图像的高度比div更高。

所以我不想调整图像大小，我只是不想用div显示图像中心。 我制作了第二张图片来解释：http://i.gyazo.com/eae80605469a32ac23037f3794270073.png

我尝试vertical-align:center但它也不起作用。

我无法发布jsfiddle，因为我发布了超过两个链接的声誉......我将其发布在评论中。

Answer 1

有一个名为 background-position 的css属性。 background-position采用x和y值，因此如果将背景位置设置为0％50％。这会将背景位置向右移动0％，向下移动50％（中心）。

background-position:0 50%;

jsfiddle example

当你在这里时，还要看一下 background-size ，background-size有一些方便的属性'cover'，'contains'。

<强>盖

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内。

包含

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

与背景定位一起，您可以很好地管理您的背景大小和位置。

Answer 2

尝试执行此操作background-attachment : absolute;

OR

只需删除此代码background-attachment : fixed;

即可