CSS 可以滚动的背景图片

Question

我正在尝试创建一个背景图像，它有一个滚动条来垂直向下滚动图像。我喜欢使用宽度和高度百分比的想法，因为这种方法似乎总能使图像适合任何屏幕分辨率。不幸的是，图像的长度相当大，因此图像的底部被截掉了。我尝试了各种方法来实现这一点，包括更改背景大小属性、使用 overflow-y:scroll 和其他不值一提的编辑。这是我目前正在处理的代码：

HTML

<!doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
</head>

<body>
<div class='image'></div>
</body>

</html>

CSS

@charset "UTF-8";
/* CSS Document */
body { 
    margin:0;
}
.image {
    position:absolute;
    width:100%; 
    height:100%;
    background:black;
    background-image:url(../pictures/testjpg);
    background-size:cover;
    overflow-y: scroll;
}

Answer 1

滚动条会移动视口，以便您可以看到屏幕上没有显示的内容。在上面的代码中，如果您通过给图像提供相对高度（屏幕的 %100 高度和宽度）来扩展和收缩图像，则永远不会有 'scroll-able' 垂直滚动条，因为没有任何内容可以滚动到。它永远不会 'overflows'.

要真正拥有可滚动的图像，您需要为其指定宽度 - 或者在本例中 - 高度大于您的视口。

Answer 2

更新： 如果没有高度，您将无法从上到下滚动图像。但你无法适应任何屏幕。

body,html {

  margin: 0;
   
}

.image {
  background-image: url("http://www.w3schools.com/howto/img_parallax.jpg");
  background-position:center;
  background-size: 100% 100%;
  
  height:300vh;
  
  }

<body>

   <div class="image">

 </div>
</body>

CSS 可以滚动的背景图片

CSS background image that can scroll

html

css

background

background-image