Question

对于我缺乏术语而道歉，我是CSS的新手。目前正在根据my webpage修改HTML5 UP's Multiverse template的主要CSS。

我正试图为电影设立一个部门，＆＃34; ＆＃34;其他媒体，＆＃34;和＆＃34;商业。＆＃34;我已更新了main.css文件，以便对#main，#other-media和#commercial部分进行说明。

但是，后续添加的部分(other media & commercial)与第一部分(film or #main)不匹配。我不确定为什么会出现这种情况，因为我只是复制并粘贴了每个部门的代码，但更改了部门ID名称，如果我应该调整main.css的另一部分？

非常感谢您的帮助！

Answer 1

在#main部分中，图片是a标签的背景图片，其背景大小为cover，在#other-media部分中，图片为常规图片（即img标签）。您应该将它们全部设置为背景图像（使用相同的设置）以获得相同的结果。

评论后补充：

<article>部分中#main元素的代码为a个标记，background-image标记为background-size: cover，加上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>部分中#other-media的代码：img标记里面 a标记，加上h2和p元素：

<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标记......

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

1 个答案: