Question

编辑：我在这里添加了一个示例小提琴：http://www.bootply.com/xhBIV2zSig - 当浏览器调整大小时，两个黑色针脚应位于中间的两个房子之上。

我正在使用Bootstrap建立一个网站，我在其上有一些像这样的建筑物的背景图片：

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

背景图片是＆＃34;被剪切＆＃34;当我调整浏览器窗口的大小时，没有滚动，这是我想要的效果。

我在一些建筑物上也有一些针脚，我希望他们用背景图片调整大小（保持相同的位置）。

知道怎么做吗？

这是一张解释事物的图片： Image positioning on top of background

基本上我希望红色针脚在背景上保持相同的位置，因为它的大小已经调整。

这可以通过CSS和/或JavaScript / jQuery来完成吗？

Answer 1

尝试小提琴：FullscreenBVackwithPins

HTML

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

CSS

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

的JavaScript

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

Bootstrap图像定位在背景上

1 个答案: