Javascript 引导图像定位在背景上编辑：我在这里添加了一个例子：当浏览器正在调整大小时，两个黑色引脚应该位于中间的两个房子上方。_Javascript_Jquery_Html_Css

Javascript 引导图像定位在背景上编辑：我在这里添加了一个例子：当浏览器正在调整大小时，两个黑色引脚应该位于中间的两个房子上方。

javascript jquery html css

Javascript 引导图像定位在背景上编辑：我在这里添加了一个例子：当浏览器正在调整大小时，两个黑色引脚应该位于中间的两个房子上方。,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在建立一个具有引导功能的网站，在该网站上，我有一个背景图像，其中一些建筑物如下： body { background: url(../img/backgroundLarge.jpg) no-repeat center center fixed; /* -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

我正在建立一个具有引导功能的网站，在该网站上，我有一个背景图像，其中一些建筑物如下：

body {
  background: url(../img/backgroundLarge.jpg) no-repeat center center fixed;
  /* -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
  color: white;
  font-family: 'Open Sans', 'Nunito', sans-serif;
}

当我调整浏览器窗口的大小时，背景图像被“剪切”，导致没有滚动，这正是我试图获得的效果

我也有一些引脚在一些建筑物，我想他们调整与背景图像（保持相同的位置）

你知道怎么做吗

下面是一张图片来解释事情：

基本上，我希望红色的别针在调整大小时保持在背景上的相同位置

这可以通过CSS和或JavaScript/jQuery实现吗？

试试Fiddle：

html

JavaScript

红色插针与图像分开了吗？我不想调整插针的大小，我只想将它们放置在背景图像顶部与浏览器相同的位置resized@Sekai是的，有不同的红色别针有相对位置还是绝对位置？@Sekai我试过相对位置和绝对位置，可能我没有正确使用它们。在我看来，如果我能让背景保持相同的大小，然后从背景上剪下来，也就是说当浏览器正在调整大小时，就不会有任何问题了。现在就尝试一下，这似乎不起作用。如果你知道的话，它实际上阻止了我的背景图片进入全屏！我需要更多的代码参考！红色引脚将绝对定位！等等，我正在用背景图片为别针制作演示小提琴，更新了第一篇文章中的小提琴示例

    <body>
    <div class="pin pin1"></div>
    <div class="pin pin2"></div>
    <div class="pin pin3"></div>
    </body>

    body {
  background: url("http://i.stack.imgur.com/LFkKU.jpg") no-repeat center center fixed;
  -webkit-background-size: 100% 100%;
  font-family: 'Open Sans', 'Nunito', sans-serif;
    top: 0;
  left: 0;
    position:relative;
}

.pin{
    position:absolute;
    height:20px;
    width:20px;
    -webkit-border-radius:20px;
    background:#FFF;
    cursor:pointer;
    transition:all 1s ease;
    border:1px solid #f00;
}
.pin:hover{
    background:#F00;
    border:1px solid #fff;
}

.pin1{
    left:50%;
}

.pin2{
    left:20%;
}

.pin3{
    left:90%;
}

 $(function() {
  h = $(window).height();
  w = $(window).width();
  $(body).style('background','url(phpthumb.php?src=bg.jpg&w='+w+'&h='+h);
});