1
HTML：（私が話している部分は、落ちると崖のPNGと最後のdivです。私は落ちるpngがそのdiv内にのみ表示され、崖のPNGの上に位置するようにしたいです。ちょうどあなたがフィドルを提供することができれば、それは本当に素晴らしいことだ画像を「固定」に配置すると消えますか？ div内の別のイメージの上に配置しますか？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="css/map_site00.css" />
<style>
body, html {
height: 100%;
margin: 0;
font: 400 13px/1.8 "Lato", sans-serif;
color: #a3000d;
background: black;
}
.bg img {
width: 100%;
}
.bg {
position: relative;
opacity: 0.95;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#bgimg-1 {
background-image: url("images/img_parallax.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/drought.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("images/story.jpg");
min-height: 400px;
}
.bgimg-4 {
background-image: url("images/missing1.gif");
min-height: 100%;
}
.bgimg-5 {
background-image: url("images/img_parallax.jpg");
min-height: 100%;
}
.bgimg-6 {
background-image: url("images/smokeysays.jpg");
min-height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
p {
font: 25px "Lato", sans-serif;;
}
h1 {
letter-spacing: 5px;
text-transform: uppercase;
font: 35px "Lato", sans-serif;
color: #fff;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #fff;
}
/* SOLVES IMAGE SIZE PROBLEM in POPUPS */
/*Use !important to Override any other CSS rules that may be affecting an element..."A rule that has the !important property will always be applied no matter where that rule appears in the CSS document"*/
.leaflet-popup-content {
width:auto !important;
}
/*A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element*/
.leaflet-popup-tip {
width: 0px;
height: 0px;
}*/
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bg {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div style="color: #fff;background-image:url(images/smoke.gif);text-align:center;padding:0px 0px; height: 100%; width: auto; text-align: justify; margin-top:-45px">
<center><p style="color: #aa0000; text-transform: uppercase;font-size: 3.5em; -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
text-shadow:
-.5px -.5px 0 #000,
.5px -.5px 0 #000,
-.5px .5px 0 #000,
.5px .5px 0 #000;">Story from the Ashes</p></center>
<center><p style="color: #fff; text-transform: uppercase; font-size: 2.0em; -webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
text-shadow:
-.5px -.5px 0 #000,
.5px -.5px 0 #000,
-.5px .5px 0 #000,
.5px .5px 0 #000;">Three years ago a strange series of disappearances from Western North Carolina occurred promoting surrounding authorities to search the area for the missing individuals. The disappearances took place over a period of about 6 months and beginning with a young women who went missing during a hiking trip with her best friend in Nantahala National Forest. </p></center>
<center><img src="images/arrow.png"></img></center>
</div>
<div class="bgimg-4 bg">
<div class="caption">
<h1 style="text-align:center;">Images found on missing woman's social media hours before dissapearance along side a news segment</h1>
</div>
</div>
</div>
<div class="bgimg-3 bg" style="height: 100%; position: relative">
<img src="images/falling.png" style=" z-index:2; height: 150px; width: 150px; left: 65%; position: fixed"></img>
<img src="images/cliff.png" style="height: 70%; width: 50%; margin-top: 26%; margin-left: 50%"></img>
</div>