CSS

Question

所以我有一个用作背景的图像，它 'scales to fill' 框架正是我想要的，但是图像没有居中，因此当 window 较小时就像在 phone 上一样，显示的图像只是边缘。这是我使用的代码：

HTML

<div class="Background">
<div>

CSS

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('background.png');
    background-size: cover;
}

如果有人能给我一些提示，那就太好了。谢谢

Answer 1

background-position: center;

添加到您的 css 规则将使背景图片居中

text-align:center

添加到您的 div 将适用于其中的所有内容，甚至文本

Answer 2

css代码

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
}

Answer 3

试试这个：100% 有效。

.Background {
    display: block;
    margin: 0px auto;
    width: 100%;
    height: 100%;

    background-size: cover;
     background : rgba(0, 0, 0, 0) url("background.png") no-repeat scroll center top;
}

Answer 4

包含一个问题的示例将是有益的。

试试这个。

        .Background {
        display: block;
        margin-left: auto;
margin-right:auto;
        width: 100vw;
        height: 100vh;
        background: url('background.png') no-repeat /* <- however you want the image to repeat */ center;
    }

见http://www.w3schools.com/css/css_background.asp

CSS - 图像居中

CSS - Centering an image

html

scaling