Question

我有一个CSS背景图片，但是当我通过浏览器调整大小以放大时，该图片向左移动。即使浏览器调整了尺寸，如何将图像保持在同一位置？我的代码（到目前为止）是：

.home-top {
    width: 100%;
    background-image: url('../assets/images/home-2x.png');
    background-repeat: no-repeat;
    background-position: -75px -600px;
    margin-bottom: 50px;
}

有什么主意吗？

Answer 1

我以前有这个问题，
这是我的项目中的一个示例-LIVE DEMO
拖动编辑器拆分器，观察输出的反应。

诀窍在CSS中：

  .general /* the beckground image class */
  {
    background-image: url('https://clipground.com/images/business-people-handshake-clipart-18.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    opacity: 0.95;
    -webkit-backface-visibility: hidden;
    -webkit-background-size: cover !important;
    z-index: -1;
    -webkit-transform: translate3d(0, 0);
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

CSS，即使浏览器尺寸不同，背景图片也可以保留在原位

1 个答案: