可以滚动的CSS背景图片 [英] CSS background image that can scroll
问题描述
我正在尝试创建一个背景图像，该背景图像将具有一个滚动条以将图像垂直向下滚动.我喜欢使用宽度和高度百分比的想法，因为这种方法似乎总是使图像适合任何屏幕分辨率.不幸的是，图像的长度相当大，因此图像的底部被切除.我尝试了多种方法来实现此目的，包括更改background-size属性，使用overflow-y:scroll和其他值得一提的编辑.这是到目前为止我正在处理的代码:
I am trying to create a background image that will have a scroll bar to scroll the image down vertically. I like the idea of using width and height percentages because it seems like this method always fits the image to any screen resolution. Unfortunately, the length of the image is rather large and therefore the bottom of the image gets cut off. I have tried various ways to get this working including changing the background-size properties, using overflow-y:scroll and other edits that are not worth mentioning. Here is the code I am working on thus far:
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;
}
推荐答案
更新:如果没有高度，则无法从上到下滚动图像.但您无法在任何屏幕上安装它.
UPDATE: without height you can't scroll the image top to bottom. but you cant fit this any screen.
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背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
