Hur man ändrar bakgrund när man rullar
- Föregående sida Suddig bakgrundsbild
- Nästa sida Kopplade bilder
Lär dig hur man använder CSS för att ändra bakgrundsbilden när man rullar.
Ändra bakgrundsbilden när man rullar
Rulla ner i ramen för att se effekten:
Hur man ändrar bakgrundsbilden när man rullar
Första steget - Lägg till HTML:
<div class="bg-image img1"></div> <div class="bg-image img2"></div> <div class="bg-image img3"></div> <div class="bg-image img4"></div> <div class="bg-image img5"></div> <div class="bg-image img6"></div> <div class="bg-text">TEXT</div>
第二步 - 添加 CSS:
body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; {} * { box-sizing: border-box; {} .bg-image { /* 全高 */ height: 50%; /* 将图像居中并适当地缩放 */ background-position: center; background-repeat: no-repeat; background-size: cover; {} /* 所用的图像 */ .img1 { background-image: url("img_snow.jpg"); } .img2 { background-image: url("img_girl.jpg"); } .img3 { background-image: url("img_lights.jpg"); } .img4 { background-image: url("img_nature.jpg"); } .img5 { background-image: url("img_forest.jpg"); } .img6 { background-image: url("img_woods.jpg"); } /* 将文本放置在页面/图像的中间 */ .bg-text { background-color: rgb(0,0,0); /* 回退颜色 */ background-color: rgba(0,0,0, 0.4); /* 黑色半透明 */ color: white; font-weight: bold; font-size: 80px; border: 10px solid #f1f1f1; position: fixed; /* 保持固定 */ top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 300px; padding: 20px; text-align: center; {}
- Föregående sida Suddig bakgrundsbild
- Nästa sida Kopplade bilder