html - CSS 流体 : fixed to background

Question

我有一把 fiddle here .

CSS:

body, html{
    background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed; 
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:100% 100%;
}

#img {
    width:70%;
    display:inline-block;
    background-color:red;
    position:absolute; 
    bottom:12%; 
    height:70%;
    margin-top:-80px;

    margin-left:100px;
}

HTML:

<div id="img"> </div>

是否可以使名为#img 的id 标签看起来固定在背景中？我只是想使蓝色框之间的红色 block 流动(看 fiddle )。

因此，如果您调整页面的分辨率，红色 block 不会在高度方向超出蓝色框，但会在宽度方向超出蓝色框。

所以基本上我想确保红色 block (#img) 位于背景图像上的蓝色框内。我该怎么做？

Answer 1

百分比和像素不能很好地混合...将其全部更改为百分比，例如:

#img {
    width: 74.1%;
    display: inline-block;
    background-color: red;
    position: absolute;
    height: 71.8%;
    top: 17%;
    left: 13.2%;
}

fiddle : http://jsfiddle.net/Niffler/r3nW8/43/