Question

所以我有一个作为背景的图像，它“缩放以填充”框架，这正是我想要的，但图像不居中，因此当窗口像手机一样小时，显示的图像就是边缘。这是我正在使用的代码：

HTML

function formatDate(d) {
  var dd = d.getDate(),
      yy = d.getFullYear(),
      monthNames = ["January", "February", "March", "April", "May", "June",
                      "July", "August", "September", "October", "November", "December"],
      mm = monthNames[d.getMonth()],
      hh = d.getHours(),
      min = d.getMinutes();


  if ( dd < 10 )  dd = '0' + dd;
  if ( hh < 10 )  hh = '0' + hh;
  if ( min < 10 )  min = '0' + min;

  return mm +' '+ dd +', '+ yy + ' ' + hh + ':' + min;  
}

CSS

<div class="Background">
<div>

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

Answer 1

试试这个：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 2

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

试试这个。

        .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

Answer 3

background-position: center;

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

text-align:center

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

Answer 4

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;
}

CSS - 居中图像

4 个答案: