Question

如果您查看以下小提琴：http://jsfiddle.net/5TJ6G/3/ - 您调整浏览器大小，可以将X放在背景图像的中心。但是，当您调整大小时，它不会停留在那里。

是否可以在不使用固定宽度或固定位置的情况下保持位置？我怀疑可能需要一点css技巧......

body {
        background: url('http://cl.ly/image/3j2s1u2n0t15/Screen%20Shot%202014-07-23%20at%2012.25.02.png') top center no-repeat;
        background-size: cover;
    }
    .thing {
        position: absolute;
        top: 45%;
        left: 45%;
    }

要查看上下文中的示例：http://codepen.io/jhealey5/debug/gAByF - 白线需要保持相对相同的位置。

干杯。

Answer 1

CSS

body {
    background: url('http://cl.ly/image/3j2s1u2n0t15/Screen%20Shot%202014-07-23%20at%2012.25.02.png') center center no-repeat;
    background-attachment:fixed;
    background-size:cover;
}
.thing{
    position:absolute;
    top:49%;
    left:49%;
}

HTML

<div class="img">
   <div class="thing">x</div>
</div>

http://jsfiddle.net/5TJ6G/5/

Answer 2

绝对位置

表示元素是绝对定位的，而其他元素显示在网页上，如绝对定位的元素，而不是。元素的位置由左，上，右和下属性定义，也影响父元素位置值的位置。例如，如果父级设置为静态位置值或没有父级，则从浏览器窗口的边缘坐标开始计数。如果父级设置为固定，相对或绝对位置值，则计数从父元素的边缘坐标开始。

我认为这是正确的方法，因为你的例子从屏幕的边界定位vyschitvaetsya，在我的例子中从父元素的边界定位

DEMO

<div class="wrap">
    <div class="thing">x</div>
</div>

.wrap {
   background: url('http://cl.ly/image/3j2s1u2n0t15/Screen%20Shot%202014-07-23%20at%2012.25.02.png') top center no-repeat;
            background-size: cover;
  width: 500px;
  height: 500px;
  margin:0 auto;
  position: relative;
}
.thing {
            position: absolute;
            top: 45%;
            left: 45%;
        }

将绝对定位元素与背景对齐

2 个答案: