我正在尝试创建一个水平滚动的网站，中间有一个固定字符，类似于 http://www.rleonardi.com/interactive-resume/ .
当尝试更改 css 以调整图像大小时，它不会影响网站，我不知道是否需要使用 position:fixed 将字符固定在中心。
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Your title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background>
<character><img src="Photos/Character.png" alt= "Background image"/> </character>
<div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div>
</body>
和CSS:
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
最佳答案
对于像这样的复杂元素，您真的必须全神贯注于元素的定位以及固定/相对和绝对定位的工作原理。 This应该让你走上正轨。在这种情况下，我使用 chrome 检查器查看了您尝试复制的示例，我可以看到该字符具有 position: absolute。这是一些调整了字符大小的 css。希望对您有所帮助!
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
background img {
width: 100%;
}
floor img {
width: 100%;
position: fixed;
bottom: 0;
}
character img {
position: absolute;
width: 200px;
bottom: 140px;
left: calc(50% - 100px);
}
关于javascript - 创建横向滚动网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47312325/