如何减小图片的大小并将其转换为视差效果？
[英]How can I decrease the size of my picture and turn it into a parallax effect?
问题描述
Basically, I am trying to create a webpage for Nikola Telsa.
基本上，我正在尝试为 Nikola Telsa 创建一个网页。 I have already made the navigation bar, but the image is very big.导航栏我已经做了，但是图片很大。 I would like the image to be much smaller, showing his face.我希望图像小得多，显示他的脸。 I have tried adjusting the size of the width and height, but the picture does not take up the entire screen if I change the values.我试过调整宽度和高度的大小，但是如果我更改值，图片不会占据整个屏幕。 In addition, I would also like to turn the image into a parallax scrolling effect.此外，我还想将图像变成视差滚动效果。 Is there anyway I can change the width and height so it is smaller and make the image have a parallax effect?无论如何我可以改变宽度和高度，使其更小并使图像具有视差效果？ Any help is appreciated.任何帮助表示赞赏。 Thanks.谢谢。 Here is my code.这是我的代码。
window.addEventListener("scroll", function(){ var header = document.querySelector("header"); header.classList.toggle("sticky", window.scrollY > 0); })
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: black; min-height: 200vh; } header{ position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; padding: 40px 100px; z-index: 100000; } header.sticky{ padding: 5px 100px; background: #fff; } header .logo{ position: relative; font-weight: 700; color: #fff; text-decoration: none; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; transition: 0.6s; } header ul{ position: relative; display: flex; justify-content: center; align-items: center; } header ul li{ position: relative; list-style: none; } header ul li a{ position: relative; margin: 0 15px; text-decoration: none; color: #fff; letter-spacing: 2px; font-weight: 500px; transition: 0.6s; } .banner{ position: relative; background: url(tesla.jpg); background-size: cover; width: 100%; height: 100vh; } header.sticky .logo, header.sticky ul li a{ color: #000; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <header> <a href="#" class="logo">Logo</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Inventions</a></li> <li><a href="#">Museum</a></li> <li><a href="#">Quotes</a></li> </ul> </header> <section class="banner"></section> <script src="nav.js"></script> </body> </html>
1 个解决方案
解决方案1
1 2020-10-03 20:44:51
window.addEventListener("scroll", function(){ var header = document.querySelector("header"); header.classList.toggle("sticky", window.scrollY > 0); })
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: black; min-height: 200vh; } header{ position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; padding: 40px 100px; z-index: 100000; } header.sticky{ padding: 5px 100px; background: #fff; } header .logo{ position: relative; font-weight: 700; color: #fff; text-decoration: none; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; transition: 0.6s; } header ul{ position: relative; display: flex; justify-content: center; align-items: center; } header ul li{ position: relative; list-style: none; } header ul li a{ position: relative; margin: 0 15px; text-decoration: none; color: #fff; letter-spacing: 2px; font-weight: 500px; transition: 0.6s; } .banner{ position: relative; background: url(https://upload.wikimedia.org/wikipedia/commons/7/79/Tesla_circa_1890.jpeg) no-repeat; //background-size: cover; background-attachment: fixed; width: 100%; height: 1200px; } header.sticky .logo, header.sticky ul li a{ color: #000; }
<header> <a href="#" class="logo">Logo</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Inventions</a></li> <li><a href="#">Museum</a></li> <li><a href="#">Quotes</a></li> </ul> </header> <section class="banner"></section> <script src="nav.js"></script>
I have added background attachment css in banner class and comment out background size cover.我在横幅类中添加了背景附件 css 并注释掉了背景大小封面。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.