我仍在学习CSS,并遇到了一个令人困惑的问题,即在不同的div元素中出现一个幻灯片标题。当我在不编辑其背后图像属性的情况下自行插入字幕时,效果很好,但当我在网页中编辑它以使其更适合时,字幕都会弹出在背景分区的底部。
THIS
是这个图自己或者当我不编辑它时所做的,但是如果你看下面的代码,会有什么东西导致这个幻灯片在一个不同的div中弹出,我无法弄清楚它是什么。
CSS:
html, body {
margin: 0px;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
.background-image {
left: 0;
top: 0;
z-index: 1;
display: block;
background-image: url(https://www.kasandbox.org/programming-images/landscapes/mountains-in-hawaii.png);
background-size: cover;
width: 100%;
height: 100%;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.bodybox {
background-color: rgba(245, 245, 245, 0.6);
position:fixed;
padding:0;
margin:0;
border: 0;
top:0;
left:0;
width: 100%;
height: 100%;
z-index:2;
overflow: scroll;
}
.heading {
background-color: rgba(0,0,0,.75);
width: 100%;
height: 10%;
color: rgb(255,255,255);
text-align: right;
margin: 0;
border: 0;
padding: 0;
z-index: 2;
display: table;
vertical-align: center;
}
.travel_menu {
background-color: rgba(124,175,192,0.75);
color: rgb(255, 255, 255);
padding: 0;
height: 200px;
width: 100%;
max-width: 100%;
z-index: 2;
text-align: left;
vertical-align: center;
display: inline-flex;
}
.
figure {
z-index: 3;
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
font-size: 15px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
}
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
.container {
width: 300px;
height: 180px;
}
.container img {
width: 100%;
height: auto;
}
h2{
padding-top: 0;
margin-top: 0;
}
h1{
padding-top: 0;
margin-top: 0;
line-height: 10px;
padding: 10px 0;
display:table-cell;
vertical-align: bottom;
}
HTML格式:
<div class="background-image"></div>
<body>
<div class="bodybox">
<div class="heading"><h1>Travel to ....</h1></div>
<div class="travel_menu">
<div class="container">
<figure class="cap-bot">
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
<figcaption>
Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
</figcaption>
</figure>
</div>
<div class="container">
<figure class="cap-bot">
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
<figcaption>
Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
</figcaption>
</figure>
</div>
<div class="container">
<figure class="cap-bot">
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
<figcaption>
Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
</figcaption>
</figure>
</div>
</div>
</div>
</body>
