如何使div“不占用空間”？
[英]How do I make a div “not take space”?
問題描述
我正在嘗試使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>
3 個解決方案
解決方案1
1 2014-01-30 17:41:35
只需稍作調整即可實現。 您可以將旋轉div放置在bg 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();
});
});
我認為這可以解決您的問題。 讓我知道您是否需要任何幫助。
解決方案2
0 2014-01-30 17:19:03
您可能還想嘗試使用z-index。
解決方案3
0 2014-01-30 17:54:50
我知道了 訣竅是在.content上使用z-index並將旋轉的div放置在0尺寸的相對定位div內，該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占用所有開放空間？ （與JQM沖突）
[英]How do I make content div take up all open space? (Conflicting with JQM)
如何使浮動的DIV占據其容器的水平空間？
[英]How do I make floated DIV's take up the horizontal space of their container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.