用图像覆盖整个模态

Question

我正在使用Materialise CSS。我有一个模态，我想将整个背景设置为一个图像（所以当它打开时，它看起来就像你只是在网页背景模糊的情况下查看一个漂亮而大的图像）。问题在于，当我这样做时，如果模态大于它，则重复图像。

我希望图像能够覆盖整个模态。

我的模态：

<div id="imageModal" class="modal">
    <div class="modal-content">

    </div>
</div>

CSS：

#imageModal{
  background-image: url("../images/office2.jpg");
  background-reapeat: "none";
  height: 50%;
  width: 100%;
}

Answer 1

你有一些背景重复的拼写错误。试试这个：

#imageModal{
  background-image: url("../images/office2.jpg");
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
}

此外，如果您正在使用CSS3，则可以将background-size属性设置为cover，以便根据模式的大小调整图片大小。像这样：

#imageModal{
  background-image: url("../images/office2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50%;
  width: 100%;
}

Answer 2

你好加入你的风格......

background-repeat: no-repeat;

只是检查并检查你有背景重复的样式：没有哪个是删除已经因为没有这样的风格所以只需替换上面的那个

Answer 3

试试这个

#imageModal{
  background-image: url("../images/office2.jpg");
  background-reapeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 50%;
  width: 100%;
}

参考这里

https://css-tricks.com/perfect-full-page-background-image/