Question

我试图在身体负荷的背景上显示一些随机显示图像。为此，我有一个功能。现在问题是整个页面的图像都显示出来，直到网页浏览器可以滚动，这是非常冗长的我希望它只显示到身高和宽度。以下是我正在使用的代码：

var body = document.body;
var html = document.documentElement;
var bodyHeight = Math.floor(Math.min(body.scrollHeight));
var htmlHeight = Math.floor(Math.min(html.scrollHeight));

var height = Math.max(bodyHeight, htmlHeight);

for(i=0; i<height; i++){
var images = [],


---------------
-----------------
image array here
--------------------
-------------------------
index = Math.floor(Math.random() * images.length);

document.write(images[index]);

}

Answer 1

正文是整页。你想要的是屏幕的高度和宽度。为此，在身体内部创建一个div并将图像作为div的背景，使用单位100vh，100vw;

https://devcode.la/tutoriales/unidades-vh-vw-css/

Answer 2

就这样做

body{
background-image:url('');
background-position:100% 100%;
**background-size:cover;**
width:100%;
background-attachment:fixed;
 }

您确保将background-size属性设置为＆＃34; cover＆＃34;。

Answer 3

如上所述，正文是整页。你想要'视口'的宽度/高度。这就是另一个答案所涵盖的内容。另一种方法只是使用CSS来设置html标签的背景图像，如下所示：

        <style>
        html {
            background-image: url('https://images.unsplash.com/photo-1478427433968-28045906c1dd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f1c8cb36c65c1e472e0ebf9ef6d4eac5');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100%; min-height: 100%;
        }
        </style>

如何显示全身高度的背景

3 个答案: