html - 是否可以全屏覆盖来自 api 的图像？

Question

我正在尝试将来自Unsplash Source API的图像居中并覆盖整个屏幕。

我认为，因为在已经应用 css 之后图像实际上会被获取，所以它不能像这样工作：

（如果演示可能会被掩盖，请全屏运行）

html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
 }
 
 .centered-image {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    background: url(https://source.unsplash.com/collection/1228371) no-repeat center center fixed;
 }

<div class="centered-image"></div>

你们知道变通方法吗？

标签： htmlcssapi

Answer 1

.centered-image {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    height: 100%;
    background-image: url(https://source.unsplash.com/collection/1228371);
}

做了一些 CSS 更改。试试这个。