我不知道为什么，但我为页面背景选择的任何图像都不会100%完全显示。我不确定创建-反应-应用程序是否与它有关或什么，但总有图像的某些部分溢出并从页面中删除。
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: 100%;
background-position: center;
height: 100vh;
}
我需要完整显示图像。 背景大小：由于某种原因，100% 似乎没有在创建-反应-应用程序中执行此操作。
基本上，背景大小：100% 将用图像填充屏幕，并在必要时裁剪它。
我认为你想要的是看到整个图像。您应该为此使用包含：
html {
width: 100%;
height: 100%;
background: red url('http://media.gettyimages.com/photos/groningen-city-view- picture-id588880579?s=612x612') no-repeat center;
background-size:contain;
}斯菲德尔
这可以通过CSS来完成，寻找一些基本的CSS背景属性
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover; //contains these values - auto|length|cover|contain|initial|inherit;
background-position: center;
background-repeat: no-repeat; //contains these values - repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
height: 100vh;
background-attachment: fixed; //contains these values - scroll|fixed|local|initial|inherit;
}
注意：查找background-attachment属性，如果不需要它，可以将其删除。
试试这个：
body {
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
width: 100%;
}
我让我处理这个：
.background-image {
background-image: url('XXX');
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: scroll;
}
与上面的答案类似。