英文:
Why is overflow: hidden not working? Or is it?
问题
我正在尝试为这个网站创建一个无限滚动的背景，虽然它运行得非常完美，但我找不到一种隐藏超出我想要显示的部分的方法。如果我理解正确，背景图像本身要比其容器大，并且无限滚动的 div 的宽度需要是图像宽度的 3 倍。我不确定需要更改什么，以使背景仅占用窗口的大小，或者我只是不理解 CSS。
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template 002</title>
<link href="https://willdotjpg.gay/templates/y2ktest.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="container">
<div class="infinite-scrolling"></div>
</div>
<div class="title">
</div>
<div class="main"></div>
</body>
</html>
CSS：
.container {
overflow: hidden;
}
.infinite-scrolling {
background: url("https://willdotjpg.gay/images/backgrounds/testbackground.png") repeat-x;
height: 2520px;
width: 10080px;
/* 图像宽度的3倍 */
animation: slide 60s linear infinite;
position: absolute;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-3360px, 0, 0);
}
}
英文:
I'm trying to make an infinite scrolling background for this site, and while it's working perfectly, I can't find a way to hide the part that extends beyond what I want to show. If I'm understanding this right, the background image itself to be larger than its container, and the width of the infinite-scrolling div needs to be 3x the width of the image. I'm not sure what I need to change so that the background only takes up the size of the window, or if I just don't understand the CSS.
The HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template 002</title>
<link href="https://willdotjpg.gay/templates/y2ktest.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="container">
<div class="infinite-scrolling"></div>
</div>
<div class="title">
</div>
<div class="main"></div>
</body>
</html>
The CSS:
.container {
overflow: hidden;
}
.infinite-scrolling {
background: url("https://willdotjpg.gay/images/backgrounds/testbackground.png") repeat-x;
height: 2520px;
width: 10080px;
/* The image width times 3 */
animation: slide 60s linear infinite;
position: absolute;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-3360px, 0, 0);
}
}
答案1
得分: 2
这是您想要的：
.container {
overflow: hidden;
width: 100%;
height: 100vh;
position: fixed;
}
要隐藏溢出，首先您需要设置特定的高度或宽度，并且这里您需要设置为固定位置。
英文:
Here is what you wanted:
.container {
overflow: hidden;
width: 100%;
height: 100vh;
position: fixed;
}
To hide overflow first you have to set a specific height or width and also here you need to set the position fixed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论