Question

我已经为我的应用设置了背景图片，但是当在网络浏览器中显示时，它会被推到右边，如下所示：

enter image description here

当我添加margin-left: -213px;时，图像会被更正，但是当在移动浏览器中显示时，由于边距属性，它会变得混乱。

CSS文件：

html,
body {
  height: 100%;
  width: 100%;
}

.background {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  margin-left: -213px;
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

生成的HTML：

<html>
  <head>
    <title>App</title>
    <link data-turbolinks-track="true" href="/assets/application-4f1b4b41b9ae7b2172e04bc0efdd0472.css" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/application-73022516521c5ed853bbbb1f8630f920.js"></script>
    <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <div id="icons">
        <a href="#"><i class="fa fa-facebook fa-fw"></i></a>
        <a href="#"><i class="fa fa-instagram fa-fw"></i></a>
        <a href="#"><i class="fa fa-twitter fa-fw"></i></a>
      </div>
      <nav>
        <ul class="nav pull-right">
          <li><a href="/">Home</a></li>
            <li><a class="navbar-link" href="/login">Login</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
    <div class="container">
<div class="background">
</div>
    </div>
  </body>
</html>

为什么会这样？我可以将margin-left属性添加到Web浏览器吗？

Answer 1

使用您提供的相同代码，我的解决方案是删除规则：

 display: table;
 margin-left: -213px;

然而，添加：

top: 0;
left: 0;

到 .background 类

Answer 2

使用浏览器的开发人员工具检查发生的情况。对我来说，看起来左边有一些隐藏/显示的元素，具体取决于屏幕尺寸（媒体查询）

Answer 3

尝试以下Css：

@media screen and (min-width: 960px) {
.background {

/*add your desired css it will show only on the screens which are above 960px
(you can change this value though..) For example:*/
margin-left:-213px;  /* negative value this much I personally don't recommend  */        

}
}

只检查这是否解决了您的问题... :)

Answer 4

从此代码中删除container div。容器内的所有内容都以页面为中心，而左边距是来自此div。

<div class="container">
  <div class="background">
  </div>
</div>

背景图像向右推

4 个答案: