1
HTML: (Часть, о которой я говорю, это самый последний div с падающими и скальными pngs. Я хочу, чтобы падающий 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>