Question

我正在尝试创建一个背景图像，该图像将有一个滚动条以垂直向下滚动图像。我喜欢使用宽度和高度百分比的想法，因为看起来这种方法总是适合任何屏幕分辨率的图像。不幸的是，图像的长度相当大，因此图像的底部被切断。我已经尝试了各种方法来实现这一点，包括使用overflow-y：scroll和其他不值得一提的编辑来改变background-size属性。这是我目前正在处理的代码：

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高度和屏幕宽度）来使图像扩展和收缩，那么永远不会有可滚动的图像。垂直滚动条，因为没有什么可滚动到。它永远不会溢出＆＃39;。

要实际拥有可滚动的图像，您需要给它一个宽度 - 或者在这种情况下 - 高度大于您的视口。

Answer 2

UPDATE：没有高度，您无法从上到下滚动图片。但你不能适应任何屏幕。

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背景图像

2 个答案: