Question

我试图制作一个动态的＆＃34;背景与divs旋转，我有一个大的图像，当旋转，使滚动条更大，无论如何在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中，并给出文档的大小并隐藏其溢出。

以下是代码和您的小提琴修改后的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;
}

Jquery的

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

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

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

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

Answer 2

有两种方法可以解决您的问题：

给div位置：绝对=＆gt;它赢得了空间＆＃34;
使用overflow：hidden =＆gt;滚动条将消失

Answer 3

您可能还想尝试使用z-index。

Answer 4

我得到了它的工作。诀窍是在.content上使用z-index并将旋转div放在0大小的相对定位div中，也是z-indexed。溢出仍然会触发。

http://jsfiddle.net/acbabis/gwN4H/

HTML

<body>
    <div class="background-wrapper">
        <div class="rotate"></div>
    </div>
    <div class="content">
        <p>...</p>
        <p>...</p>
    </div>
</body>

CSS

.content {
    width: 40%;
    height: 100%;
    position: relative;
    padding: 10% 30%;
    z-index: 10;
}
.background-wrapper {
    z-index: 0;
    position: relative;
    height: 0;
    width: 0
}
.rotate {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 200px;
    top: 200px;
    // Animation code removed
}

我如何制作一个div＆＃34;不要占用空间＆＃34;？

4 个答案: