html - 如何制作 div "not take space"？

Question

我正在尝试制作一个带有 div 旋转的“动态”背景，我有一个大图像，旋转时会使滚动条变大，无论如何在 div 中显示图像，在背景中，旋转但是让它不占用空间/不改变滚动条？

对于旋转，我使用的是 css 动画。

CSS

body {
    background-color:rgb(80,0,0);
}
.rotating {
    width:600px;
    height:600px;
    position:absolute;
    top:-50px;
    left:-100px;
    background-color:rgb(0,0,255);
    -webkit-animation:rotate 140s linear infinite;
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
    background-color:rgba(0,0,0,0.5);
    margin:0 auto;
    position:relative;
}

HTML

<div class='rotating'></div>
<div class='content'>test</div>

http://jsfiddle.net/kZW8j/

Answer 1

只需对您的代码进行少量调整即可实现这一点。您可以将旋转的 div 放置在 bg div 中，该 div 是绝对定位的并给定文档的大小并隐藏其溢出。

这是代码，您的 fiddle 已修改 http://jsfiddle.net/kZW8j/2/

HTML

<div class="bg">
    <div class='rotating'>
</div>
<div class='content'>test</div>

CSS

body {
    background-color:rgb(80,0,0);
}
.bg{
    position:absolute;
    top:0;
    left:0;
    background-color:rgb(80,0,0);
    overflow:hidden;
}
.rotating {
    width:600px;
    height:600px;
    position:absolute;
    top:-50px;
    left:-100px;
    background-color:rgb(0,0,255);
    -webkit-animation:rotate 140s linear infinite;
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
    background-color:rgba(0,0,0,0.5);
    margin:0 auto;
    position:relative;
}

查询

function widthContainer()
{
    var dw=$(document).width(), dh=$(document).height();
    $(".bg").css({"width":dw, "height":dh});
}

$(document).ready(function(){
widthContainer();

$(window).resize(function(){
    widthContainer();
});
});

我认为这可以解决您的问题。如果您需要任何帮助，请告诉我。