Html 无法使CSS分区相互匹配，即使它们是相同的

抱歉我没有术语，我是CSS的新手。当前正在修改基于的的主CSS

我正试图为“电影”、“其他媒体”和“商业”设立一个部门。我已经更新了文件，以说明

#main

、

#other media

和

#commercial

部分

但是，随后添加的部分与第一部分不匹配。我不确定为什么会出现这种情况，因为我只是复制并粘贴了每个分区的代码，但更改了分区ID名称，是否应该调整main.css的另一部分

非常感谢您的帮助

在您的

#main

部分中，图像是

a

标签的背景图像，具有背景大小

封面

，在

#其他媒体

部分中，图像是常规图像（即

img

标签）。您应该使它们成为所有背景图像（具有相同的设置）以获得相同的结果

评论后添加：

#main

部分中

元素的代码是

a

标签，带有

背景图像

，背景大小：封面，加上

h2

和

p

元素：

<article class="thumb">
  <a class="image" style="background-image: url(&quot;images-art/thumbs/07.jpg&quot;); cursor: pointer; outline: 0px none;"><img src="images-art/thumbs/07.jpg" alt="" style="display: none;"></a>
  <h2>...</h2>
  <p>....</p>
</article>

<article class="thumb">
  <a href="images-art/fulls/03.jpg" class="image">
    <img src="images-art/thumbs/03.jpg" alt="">
  </a>
  <h2>...</h2>
  <p>....</p>
</article>          

---

所以区别在于图像的处理：一次作为填充文章元素的背景图像，一次作为

img

标记

所有部分的代码都是相同的，我只是将

#main

替换为

#其他媒体

。因此，所有分区的大小都是

cover

。或者你是在暗示什么不同的东西？不，不是。请阅读我在答案中添加的内容，并再次查看您自己的代码。谢谢！我必须修复main.js和main.scss文件才能按照您的建议执行（不仅仅是main.css），但它确实有效！