在DIV中包含背景图像的CSS

我在这里陷入困境，试图弄清楚如何让背景图像在下面的DIV下面下垂。我不得不采取一些相当不好的手段。在DIV中包含背景图像的CSS

.animation span { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -999; 
    animation-name: fade; 
    animation-iteration-count: infinite; 
    animation-duration: 40s; 
    background-size: cover cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

... 

<body> 
    <div id='banner'> 
    <div class="animation"> 
     <span id="f4"></span> 
     <span id="f3"></span> 
     <span id="f2"></span> 
     <span id="f1"></span> 
    </div> 
    <div id="title"> 
     <h1>Silly Webpage Banner</h1> 
    </div> 
    </div> 
    <div id="content" style="background-color:white;"> 
    Content 
    </div> 
</body>

Here is a fiddle

我不得不增加高度，宽度，顶部动画类刚好能看到图像。如果我排除z-index，则内容DIV将沉入一层。我真的很喜欢它来尊重背景大小和背景位置，但我不明白为什么它不会。

来源

2016-08-15 MrCleanX

你想要更多类似的东西吗？背景动画内容全部包含在具有设置宽度/高度的横幅div中的位置？

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#banner { 
 
    position: relative; 
 
    display: block; 
 
    height: 4rem; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
#banner h1 { 
 
    position: absolute; 
 
    /* Position banner title */ 
 
    top:1rem; 
 
    left:1rem; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
#main { 
 
    position: relative; 
 
} 
 
.animation div { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation-name: fade; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 40s; 
 
    background-size: cover cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
#f1 { 
 
    animation-delay: -0s; 
 
    background-image: url('https://newevolutiondesigns.com/images/freebies/white-wallpaper-14.jpg'); 
 
} 
 
#f2 { 
 
    animation-delay: -10s; 
 
    background-image: url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/White-Background-Wallpapers-3D-Ball.jpg'); 
 
} 
 
#f3 { 
 
    animation-delay: -20s; 
 
    background-image: url('http://dlc.middcreate.net/wp-content/uploads/2013/09/quality-photo-for-desktop-white-bubbles-widescreen-picture-and-image-background-wallpaper-with-high-resolution.jpg'); 
 
} 
 
#f4 { 
 
    animation-delay: -30s; 
 
    background-image: url('http://hdpic.org/wp-content/uploads/2015/02/Pattern-Black-and-White-Amazing-Background-Cool-Background.jpg'); 
 
} 
 
@keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    17% { 
 
    opacity: 1; 
 
    } 
 
    25% { 
 
    opacity: 0; 
 
    } 
 
    92% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<!DOCTYPE HTML> 
 

 
<body> 
 
    <div id='banner'> 
 
    <div class="animation"> 
 
     <div id="f4"></div> 
 
     <div id="f3"></div> 
 
     <div id="f2"></div> 
 
     <div id="f1"></div> 
 
    </div> 
 
    <h1>Silly Webpage Banner</h1> 
 
    </div> 
 
    <div id="main"> 
 
    <div id="title"> 
 
    </div> 
 
    <div id="content" style="background-color:white;"> 
 
     Content 
 
    </div> 
 
    </div> 
 

 
</body>

来源

2016-08-15 21:01:54

真厉害！搞定了！我只将'height：4rem'更改为'height：auto'，以便在横幅标题封装时正确响应。谢谢！！！ – MrCleanX

我有点不知道你在这里试图达到什么，但可以尝试解释一下吗？

.animation { 
    height: any_height; 
    position: relative; 
    width: any_width; 
}

我认为这可能有帮助，如果它回答了这个问题。

来源

2016-08-15 20:58:38

如MDN's position reference说：被相对定位

元素仍然被认为是在所述文档中的元素的正常流动。相反，绝对定位的元素被取出流程，因此在放置其他元素时不会占用空间。绝对定位的元素相对于最近定位的祖先（非静态）进行定位。如果定位的祖先不存在，则使用最初的容器。

因此，您的背景div超出了放置在较高层上的流量，因此隐藏了您的内容元素：这就是为什么您需要z-index规则。

最后，由于您的absolute已定位元素不会影响其父元素，您必须明确定义其维度。

来源

2016-08-15 21:00:53 martriay

在DIV中包含背景图像的CSS

回答

相关问题