1
HTML : (내가 말하고있는 부분은 낙하 및 절벽 PNG가있는 마지막 div입니다. 해당 div 내에서만 나타나는 낙하 png를 원하지만 절벽 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>