html - 使用这个特定的 <Div> 作为背景

标签 html css

完整代码:

<!DOCTYPE html>
<html>
<head>
<style>
#sunset:checked ~ * {
--sunset: 1;
--sunrise: 0;
--color-building-dark: #00436F;
--color-building: #0258C6;
--color-building-light: #1771C5;
--color-cloud: #9ED5F8;
}
#sunrise:checked ~ * {
--sunrise: 1;
--sunset: 0;
--color-building-dark: #50A8E3;
--color-building: #9BD9FE;
--color-building-light: #E5F7FE;
--color-cloud: white;
}
:root {
--color-window-dark: #3B98D8;
--color-window-light: white;
}
#app {
width: 100%;
height: 100%;
padding: 0 2rem;
display: flex;
flex-direction: row;
z-index: 1;
position: relative;
font-family: Montserrat, sans-serif;
}
#app * {
font-weight: 600;
letter-spacing: 1px;
}
#app > .times {
flex: 0 0 70%;
}
#app > .heavens {
flex: 0 0 30%;
}
#app:before, #app:after {
content: '';
position: absolute;
display: block;
width: 100vw;
height: 100vh;
left: calc(50% - 50vw);
top: calc(50% - 50vh);
z-index: -10;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
#app:before {
background: linear-gradient(to bottom, #73DAF9, #E5F7FE);
opacity: var(--sunrise);
}
#app:after {
background: linear-gradient(to bottom, #0846B0, #23B2EE);
opacity: var(--sunset);
}
.sky {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}
.sky:before, .sky:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
z-index: -1;
}
.sky:before {
background: linear-gradient(to bottom, #2CA4F4, #C2E6FB);
opacity: var(--sunrise);
}
.sky:after {
background: linear-gradient(to bottom, #043385, #1797D7);
opacity: var(--sunset);
}
.times {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 0.5rem;
overflow: hidden;
}
.time {
color: white;
}
.time:nth-child(1) {
animation-delay: 0s !important;
}
.time:nth-child(2) {
animation-delay: 0.05s !important;
}
.time:nth-child(3) {
animation-delay: 0.1s !important;
}
.time:nth-child(4) {
animation-delay: 0.15s !important;
}
.time:nth-child(5) {
animation-delay: 0.2s !important;
}
.time:first-child:after {
font-size: 2.5rem;
}
.time:first-child ~ .time {
opacity: 0.5;
}
.time:before {
content: '';
display: block;
left: calc(50% - 0.8rem);
margin-bottom: 0.5rem;
width: 0;
height: 0;
border-width: 0.8rem;
border-style: solid;
border-color: transparent;
border-bottom-color: white;
}
.time:after {
font-size: 2rem;
}
.city {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windows {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: repeating-linear-gradient(to top, #044DA8 0, #044DA8 6px, transparent 6px, transparent var(--window-space, 14px));
overflow: hidden;
}
.windows, .windows:before, .windows:after {
background-clip: content-box !important;
}
.windows:before, .windows:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windows:before {
background: repeating-linear-gradient(to top, var(--window-color, var(--color-window-light)) 0, var(--window-color, var(--color-window-light)) 6px, transparent 6px, transparent var(--window-space, 14px));
opacity: var(--sunrise);
}
.windows:after {
background: repeating-linear-gradient(to top, gold 0, gold 6px, transparent 6px, transparent var(--window-space, 14px));
opacity: var(--sunset);
transition-delay: calc(var(--sunset, 0) * 1.5s);
transition-duration: 0.75s;
}
.ledge {
width: 100%;
height: 0;
padding: 50% 0;
overflow: hidden;
}
.ledge:before {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: right top;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
}
.ledge:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
height: 4px;
width: 100%;
background: var(--color-building);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.building {
position: absolute;
bottom: 0;
height: 60%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
z-index: 1;
}
.building > .tower {
bottom: 0;
z-index: 1;
background: currentColor;
}
.building > .tower, .building > .tower:before, .building > .tower:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
.building:nth-child(1) {
left: 64px;
height: 145px;
}
.building:nth-child(1) > .tower:nth-child(1) {
--color-pointy: var(--color-building-dark);
width: 21px;
height: 70%;
background: white;
color: var(--color-building-dark);
background: currentColor;
--window-color: var(--color-window-dark);
}
.building:nth-child(1) > .tower:nth-child(1):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 15px -5px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom right;
transform: skewY(-45deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1) .windows, .building:nth-child(1) > .tower:nth-child(1) .windows:before, .building:nth-child(1) > .tower:nth-child(1) .windows:after {
padding-right: 8px;
}
.building:nth-child(1) > .tower:nth-child(2) {
--color-pointy: var(--color-building);
width: 50px;
height: 100%;
color: var(--color-building);
}
.building:nth-child(1) > .tower:nth-child(2):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 45%;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom right;
transform: skewY(-55deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(2) .windows, .building:nth-child(1) > .tower:nth-child(2) .windows:before, .building:nth-child(1) > .tower:nth-child(2) .windows:after {
padding-left: 12px;
}
.building:nth-child(1) > .tower:nth-child(3) {
--color-pointy: var(--color-building);
width: 21px;
height: 90%;
color: var(--color-building);
transform-origin: bottom left;
}
.building:nth-child(1) > .tower:nth-child(3):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 5px -15px 0 var(--color-pointy), 10px -5px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom left;
transform: skewY(30deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3) .windows, .building:nth-child(1) > .tower:nth-child(3) .windows:before, .building:nth-child(1) > .tower:nth-child(3) .windows:after {
padding-left: 12px;
}
.building:nth-child(2) {
left: 284px;
height: 250px;
}
.building:nth-child(2) > .tower:nth-child(1), .building:nth-child(2) > .tower:nth-child(3) {
width: 38px;
height: 50%;
}
.building:nth-child(2) > .tower:nth-child(1) .windows, .building:nth-child(2) > .tower:nth-child(1) .windows:before, .building:nth-child(2) > .tower:nth-child(1) .windows:after, .building:nth-child(2) > .tower:nth-child(3) .windows, .building:nth-child(2) > .tower:nth-child(3) .windows:before, .building:nth-child(2) > .tower:nth-child(3) .windows:after {
padding: 0 6px;
}
.building:nth-child(2) > .tower:nth-child(1) {
color: var(--color-building-dark);
--color-pointy: var(--color-building-dark);
--window-color: var(--color-window-dark);
--window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(1):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 10px 15px 0 var(--color-pointy), 20px 20px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 4px;
width: 100%;
background: var(--color-building);
}
.building:nth-child(2) > .tower:nth-child(2) {
width: 62px;
height: 100%;
color: var(--color-building);
--color-pointy: var(--color-building);
--window-color: var(--color-window-light);
--window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(2):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 20px 5px 0 var(--color-pointy), 40px 15px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(2):before {
content: '';
height: 100%;
position: absolute;
top: 0;
display: block;
width: 20px;
background: var(--color-building-dark);
}
.building:nth-child(2) > .tower:nth-child(2) .windows, .building:nth-child(2) > .tower:nth-child(2) .windows:before, .building:nth-child(2) > .tower:nth-child(2) .windows:after {
padding-left: 30px;
}
.building:nth-child(2) > .tower:nth-child(3) {
color: var(--color-building);
--window-space: 20px;
}
.building:nth-child(3) {
left: 554px;
height: 180px;
}
.building:nth-child(3) > .tower:nth-child(1) {
--color-pointy: var(--color-building-dark);
width: 21px;
height: 70%;
background: white;
color: var(--color-building-dark);
background: var(--color-building-dark);
--window-color: var(--color-window-dark);
}
.building:nth-child(3) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom right;
transform: skewY(-55deg);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(1) .windows, .building:nth-child(3) > .tower:nth-child(1) .windows:before, .building:nth-child(3) > .tower:nth-child(1) .windows:after {
padding-right: 8px;
}
.building:nth-child(3) > .tower:nth-child(2) {
--color-pointy: var(--color-building);
width: 30px;
height: 100%;
color: var(--color-building);
}
.building:nth-child(3) > .tower:nth-child(2):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 10px 20px 0 var(--color-pointy), 14px 23px 0 var(--color-pointy), 20px 15px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(2):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 4px;
width: 100%;
background: var(--color-building-light);
}
.building:nth-child(3) > .tower:nth-child(2) .windows, .building:nth-child(3) > .tower:nth-child(2) .windows:before, .building:nth-child(3) > .tower:nth-child(2) .windows:after {
padding-left: 12px;
}
.building:nth-child(3) > .tower:nth-child(3) {
--color-pointy: var(--color-building);
width: 40px;
height: 70%;
color: var(--color-building);
transform-origin: bottom left;
}
.building:nth-child(3) > .tower:nth-child(3):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 60px;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom left;
transform: skewY(50deg);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(3) .windows, .building:nth-child(3) > .tower:nth-child(3) .windows:before, .building:nth-child(3) > .tower:nth-child(3) .windows:after {
padding-left: 12px;
}
.heavens {
position: absolute;
width: 200px;
right: 0;
top: 0;
z-index: 10;
height: 100%;
overflow: hidden;
}
[class    ="sun"] {
position: absolute;
text-align: center;
width: 100%;
cursor: pointer;
}
[class    ="sun"]:before {
content: attr(data-title);
display: inline-block;
width: 100%;
margin: 2rem 0;
color: white;
font-size: 1.5rem;
}
[class    ="sun"]:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
margin-top: 1rem;
content: '';
display: inline-block;
width: 100%;
border-radius: 50%;
}
.glow {
width: 200px;
height: 200px;
z-index: -1;
position: absolute;
right: 0;
filter: blur(50px);
}
.glow:before, .glow:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.glow:before {
background: #FFFAAD;
}
.glow:after {
background: white;
}
.sunrise:after {
width: 78px;
height: 78px;
background: #FFFAAD;
box-shadow: 0 0 0 1rem rgba(255, 250, 173, 0.3);
}
.sunset:before {
margin-bottom: 3rem;
}
.sunset:after {
width: 52px;
height: 52px;
background: white;
box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0.3), 0 0 0 2rem rgba(255, 255, 255, 0.15);
}
.clouds {
overflow: hidden;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10rem;
z-index: 1;
transition: box-shadow 3s cubic-bezier(0.25, 0, 0.1, 1);
}
.clouds:before, .clouds:after {
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
animation-fill-mode: forwards;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.clouds:before {
background: white;
box-shadow: 77px 11px 0 white, 170px 60px 0 white, 233px 32px 0 white, 319px 45px 0 white, 393px 54px 0 white, 474px 35px 0 white, 553px 36px 0 white, 644px 43px 0 white, 711px 32px 0 white, 808px 54px 0 white;
animation-name: clouds-sunrise;
}
.clouds:after {
background: #9ED5F8;
opacity: var(--sunset);
box-shadow: 77px 11px 0 #9ED5F8, 170px 60px 0 #9ED5F8, 233px 32px 0 #9ED5F8, 319px 45px 0 #9ED5F8, 393px 54px 0 #9ED5F8, 474px 35px 0 #9ED5F8, 553px 36px 0 #9ED5F8, 644px 43px 0 #9ED5F8, 711px 32px 0 #9ED5F8, 808px 54px 0 #9ED5F8;
animation-name: clouds-sunset;
}
@keyframes clouds-sunrise {
to {
box-shadow: 77px 15px 0 white, 170px 49px 0 white, 233px 27px 0 white, 319px 46px 0 white, 393px 57px 0 white, 474px 22px 0 white, 553px 33px 0 white, 644px 49px 0 white, 711px 26px 0 white, 808px 44px 0 white;
}
}
@keyframes clouds-sunset {
to {
box-shadow: 77px 15px 0 #9ED5F8, 170px 49px 0 #9ED5F8, 233px 27px 0 #9ED5F8, 319px 46px 0 #9ED5F8, 393px 57px 0 #9ED5F8, 474px 22px 0 #9ED5F8, 553px 33px 0 #9ED5F8, 644px 49px 0 #9ED5F8, 711px 26px 0 #9ED5F8, 808px 44px 0 #9ED5F8;
}
}
.clouds:before, .clouds:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
transition-timing-function: ease-in-out;
width: 10rem;
height: 10rem;
top: 5rem;
left: -5rem;
border-radius: 50%;
content: '';
display: block;
position: absolute;
}
.stars {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.stars:before, .stars:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
opacity: var(--sunset);
content: '';
display: block;
position: absolute;
border-radius: 50%;
}
.stars:before {
height: 3px;
width: 3px;
box-shadow: 438px 133px 2px white, 524px 13px 2px white, 195px 229px 1px white, 23px 134px 4px white, 141px 123px 4px white, 542px 146px 2px white, 748px 20px 1px white, 84px 126px 2px white, 153px 92px 3px white, 408px 171px 4px white, 445px 143px 1px white, 134px 75px 3px white, 270px 189px 1px white, 442px 325px 1px white, 129px 234px 3px white, 737px 187px 1px white, 223px 142px 1px white, 246px 105px 2px white, 98px 57px 4px white, 708px 319px 1px white, 164px 16px 4px white, 348px 168px 2px white, 481px 134px 2px white, 61px 174px 3px white, 241px 115px 3px white, 734px 206px 2px white, 107px 63px 4px white, 262px 310px 1px white, 243px 174px 4px white, 386px 172px 2px white;
}
.stars:after {
height: 5px;
width: 5px;
box-shadow: 270px 128px 2px white, 438px 262px 4px white, 746px 25px 4px white, 107px 278px 2px white, 681px 115px 1px white, 716px 77px 2px white, 308px 104px 4px white, 636px 171px 1px white, 436px 271px 4px white, 118px 89px 4px white, 407px 291px 1px white, 630px 77px 1px white, 737px 32px 2px white, 227px 66px 1px white, 148px 37px 3px white, 554px 258px 1px white, 650px 290px 4px white, 270px 160px 2px white, 647px 144px 3px white, 247px 277px 3px white, 434px 97px 2px white, 95px 24px 4px white, 614px 52px 3px white, 431px 338px 3px white, 496px 328px 3px white, 303px 74px 1px white, 557px 304px 3px white, 466px 167px 1px white, 689px 334px 4px white, 588px 147px 1px white;
transition-delay: calc(var(--sunset) * 1.5s);
}
input {
position: absolute;
visibility: hidden;
pointer-events: none;
}
#sunrise:checked ~ #app .time {
animation: time-move-sunrise 1.5s none;
}
#sunrise:checked ~ #app .time:after {
content: '';
animation: time-change-sunrise 2.5s both;
}
#sunrise:checked ~ #app .heavens > .sunset:before {
animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunset:after {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunrise {
pointer-events: none;
}
#sunrise:checked ~ #app .heavens > .sunrise:before {
animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunrise:after {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .glow:before {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .glow:after {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .ledge:before {
animation: ledge-shadow-sunrise 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
@keyframes ledge-shadow-sunrise {
50% {
transform: skewX(-25deg);
}
60% {
transform: skewX(-80deg);
}
from, to {
animation-timing-function: ease;
transform: skewX(-45deg);
}
}
@keyframes time-move-sunrise {
50% {
transform: translateY(-25%);
opacity: 0;
}
}
#sunset:checked ~ #app .time {
animation: time-move-sunset 1.5s none;
}
#sunset:checked ~ #app .time:after {
content: '';
animation: time-change-sunset 2.5s both;
}
#sunset:checked ~ #app .heavens > .sunrise:before {
animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunrise:after {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunset {
pointer-events: none;
}
#sunset:checked ~ #app .heavens > .sunset:before {
animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunset:after {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .glow:after {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .glow:before {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .ledge:before {
animation: ledge-shadow-sunset 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
@keyframes ledge-shadow-sunset {
50% {
transform: skewX(-25deg);
}
60% {
transform: skewX(-80deg);
}
from, to {
animation-timing-function: ease;
transform: skewX(-45deg);
}
}
@keyframes time-move-sunset {
50% {
transform: translateY(-25%);
opacity: 0;
}
}
@keyframes circle-leave {
50% {
transform: translateY(-50%);
opacity: 1;
}
to {
animation-timing-function: ease-out;
transform: translateY(60vh);
opacity: 0;
}
}
@keyframes circle-enter {
from {
opacity: 0;
transform: translateY(-50vh);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes time-change-sunrise {
from {
content: attr(data-sunset);
}
to {
content: attr(data-sunrise);
}
}
@keyframes time-change-sunset {
from {
content: attr(data-sunrise);
}
to {
content: attr(data-sunset);
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
z-index: -100;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
.background {
z-index: -100;
}
</style>
</head>
<body>
<input type="radio" name="time" id="sunrise"  />
<input type="radio" name="time" id="sunset" checked />
<div id="app">
<div class="glow"></div>
<div class="sky"></div>
<div class="stars"></div>
<div class="city">
<div class="building">
<div class="tower">
<div class="windows"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
<div class="tower">
<div class="windows"></div>
</div>
</div>
<div class="building">
<div class="tower">
<div class="windows"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
</div>
<div class="building">
<div class="tower">
<div class="windows"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
<div class="tower">
<div class="windows"></div>
</div>
</div>
</div>
<div class="times">
<div class="time"
data-sunrise="7:20"
data-sunset="9:14"
></div>
<div class="time"
data-sunrise="7:25"
data-sunset="9:18"
></div>
<div class="time"
data-sunrise="7:29"
data-sunset="9:23"
></div>
<div class="time"
data-sunrise="7:32"
data-sunset="9:32"
></div>
<div class="time"
data-sunrise="7:37"
data-sunset="9:37"
></div>
</div>
<div class="heavens">
<label for="sunrise" class="sunrise" data-title="Sunrise"></label>
<label for="sunset" class="sunset" data-title="Sunset"></label>
</div>
<div class="clouds"></div>
</div>
</body>
</html>

结果:

enter image description here

我想要实现的目标:

我想把它作为我网站的一部分的背景。所以我添加了这个:

.background { z-index: -100; }

然后我将 div 部分的所有内容包装在另一个 div 中并添加了 class="background"。

灾难性的结果:

enter image description here

事实上，上面的结果早在我添加“背景”类之前就已经发生了。就在我添加一个额外的 div 包裹整个东西的时候。

我的问题是:

为什么在所有其他 div 之上添加一个额外的 div 会破坏代码？

我如何才能成功地将整个景观制作为我的背景并在其上添加内容？

谢谢。

最佳答案

要使 z-index 正常工作，您需要元素的非静态位置，我还建议将所有内容包装到某个包装器中

.background {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.content-wrapper {
    position: relative;
    z-index: 2;
}

关于html - 使用这个特定的 <Div> 作为背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40907797/

上一篇：css - 如何修复宽度不固定的表格的标题？

下一篇：css - svg 悬停时奇怪的蓝色下划线

相关文章：

javascript - 通过JS彻底清空一个页面，不重定向到:blank?左右

javascript - 实时文档编辑和协作

html - 网格状文章布局

css - 如何使用 CSS 将此表格行设置为特定高度？

CSS 背景颜色过渡不起作用

jquery - 当插入符位于内容可编辑的 div 中时插入 html

java - 将自定义主题应用于 ChoiceBox 时 JavaFX 出错

html - 如何设置样式的宽度以匹配外部DIV

html - Internet Explorer 7.0 CSS 破解

javascript - 检查元素是否在屏幕上可见

©2024 IT工具网  联系我们