背景图片没有填满整个div

问题描述 投票：1回答：1

我正在研究一种模态，其中有一个图像背景。现在，图像没有填满整个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>

每当我用颜色替换背景时。有用。以下是背景图像与颜色的相似之处：

Background Image

Background Color

我已经尝试将背景大小更改为包含和100％100％。它没用。

这是关于图像的问题吗？因为图像很长。 1942×478具体而言。提前致谢！

html css
1个回答
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问题，因为顶部和底部可能会看到低谷。 （我也不能发表评论，所以这是最好的交流方式，对不起。）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.