Question

我有一个小提琴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>

是否可以使名为id的{{1}}标签看起来像是固定在后台？我只是试图让蓝色盒子之间的红色块流体（看小提琴）。

因此，如果您调整页面的分辨率，红色块将不会在高度方向上偏离蓝色框，但将从宽度方向移出蓝色框。

所以基本上我想确保红色块（#img）保持在背景图像上的蓝色框内。我怎么能这样做？

Answer 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/

Answer 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/

CSS Fluid：固定为背景

2 个答案: