Question

我正在研究其中有图像背景的模态。现在，图像无法填充整个div。这是我当前在CSS中拥有的内容：

CSS：

.modal {
    border-radius: 10px;
    min-width: 65vw;
    min-height: 40vh;
    border-width: 5px;
    border-style: solid;
    border-color: var(--secondary);
    background: url("../../../assets/cloudy.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

HTML：

<div class="modal"></div>

每当我用颜色替换背景时。有用。这是背景图片与颜色的当前外观：

我尝试将背景大小更改为100％和100％。没用

关于图像有问题吗？因为图像很长。具体为1942××478。提前致谢！

Answer 1

我已经在笔记本电脑上尝试过大多数照片，而且看起来还可以。

.modal {
    border-radius: 10px;
    min-width: 65vw;
    min-height: 40vh;
    border-width: 5px;
    border-style: solid;
    border-color: var(--secondary);
    background: url("https://media.mnn.com/assets/images/2018/08/CollectionOfCloudsAgainstABlueSky.jpg.653x0_q80_crop-smart.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
  <body>
    <div class="modal"></div>
  </body>
</html>

如果您将图像的链接而不是本地文件名放在代码中，我可以提供帮助。但可能是png问题，因为顶部和底部可能会看到低谷。（同样，我也无法发表评论，对不起，这是最好的交流方式。）

背景图片未填充整个div

1 个答案: