Question

我想通过HTML代码创建网站。我有几个问题，我已经简化了代码，以便您可以轻松了解我的问题。

我的第一个div：

<div id="div1" style="display: none;">
<div class="h1">INFORMATION</div></div>

我的第二个div：

<div id="div2" style="display: none;">
<div class="h1">INTERNATIONAL STUDENTS</div></div>

CSS：

body {
    background-image: url(world-map_00246938.jpg); 
    background-attachment: fixed;
    line-height: 15px;
    text-align: justify;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFFFFF;
    background-properties: fixed;
    }

div1是网站的首次亮相。当我点击一个链接显示div2时，我遇到了一个问题，网站的背景转换为更大的尺寸。但是当我点击div 1的链接时，它会变成正常大小。

当我在div2中插入图像时，网站的背景图片在div2变成更大的尺寸：

<div id="div2" style="display: none;">
   <div class="h1">INTERNATIONAL STUDENTS</div>
   <center><img src="url.png"
   width=100%></center></div>

从我的观点来看，我认为在div2中插入图像会使网站的背景图像变大。但是当我查看我的代码时，我已经将背景属性设置为固定的。

现在，我想找到一个可以维持网站背景图片大小的解决方案，无论我在那些编码中插入什么内容。

任何帮助都非常感激。

Answer 1

问题是background-size: cover声明，它将更改背景大小以覆盖整个元素。删除它会导致背景图像大小为原始图像大小。

如何在相同背景图片大小的HTML中制作两个不同的div？

1 个答案: