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>

你们知道一种解决方法吗？

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更改。试试看。

是否可以通过全屏覆盖api的图像？

1 个答案: