CSS Fluid：固定到背景答案

【问题标题】：CSS Fluid: fixed to backgroundCSS Fluid：固定到背景
【发布时间】：2014-06-03 06:47:10
【问题描述】：

我有一个小提琴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 标记看起来像是固定在背景中？我只是想让蓝色盒子之间的红色块流动（看看小提琴）。

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

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

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

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

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

小提琴： http://jsfiddle.net/Niffler/r3nW8/43/

【讨论】：

【解决方案2】：

当然可以：

http://jsfiddle.net/r3nW8/44/

body, html {
    background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
    background-repeat:no-repeat;
    -webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}
#img {
    background-color:red;
    position:absolute;
    margin: 0 auto;
    top:18%;        /* not 15% cause you have more space on the top area! :) */
    left:0;
    bottom:0;
    right:0;
    height:70%;
    width:73%;  /* note the blue border on your image is not positioned well... */
}

通过更多的% 调整，您可以获得完美的结果：http://jsfiddle.net/r3nW8/45/

【讨论】：