Question

所以我有一个块，它应该保持它的位置和比例以适应背景，所以当我调整窗口大小时，块会调整大小，但背景和块会以不同的方式调整大小。

html,body {
    height:100%;
    width:100%;
}

body {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;

    background: url('../img/mainpage/555.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

a#easttoplink {
    position:relative;
    display:block;
    left:40%;
    top:26.5%;
    background-color: #00ff00;
    opacity: 0.3;
    width:21.5%;
    height:4%;
}
a#easttoplink:hover {
    opacity:0.7;
    background-color: #ffff00;
}

Answer 1

这样做：

CSS

#wrapper {
    position: absolute;
    top: 50%;
    margin-top: -25%;/* half of #content height*/
    left: 0;
    width: 100%;

}
#container {
    position: relative;
    width:100%;
    display: inline-block;
    margin: auto auto;
}
#container:after {
    padding-top: 56.25%;
    display: block;
    content: '';
    overflow:hidden;
}

Wrapper在#container

之外

如何在窗口调整大小的同一位置保持css块？

1 个答案: