3

我已经上下搜索试图找到解决这个问题的方法，但到目前为止没有任何效果。我有一个带有类的部分元素，它在网站的主页上重复。唯一的区别是背景图像的变化。我无法显示背景图像。经过一番修改后，我似乎根本无法识别我的选择器。

这是一个例子：

主页上框的 HTML

<section class="maincontent"></section>

投资组合页面上框的 HTML

<section class="maincontent port"></section>

CSS

.maincontent {
width: 860px;
height: 540px;
margin: 50px;
padding: 0;
background-color: #000;
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.6);
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.6);
box-shadow: 7px 7px 7px rgba(0,0,0,0.6);
}
.maincontent.port {
background: url(../images/portduck.jpg) no-repeat top;
}

我尝试使用#port 的ID 而不是多个类，尝试在.maincontent 和.port 之间放置一个空格，尝试更改类的顺序，但没有任何解决方法。我还尝试尝试覆盖框的宽度和高度，但没有发生任何事情，这让我认为问题出在我的选择器上，或者与框阴影有关。

任何帮助将不胜感激。谢谢！

4

3 回答 3

2

1- 确保图像路径正确（将鼠标悬停在开发者工具等中的 URL 上，或检查网络面板）。

2-尝试将 display: 块添加到该类的 CSS 中。

于 2012-09-06T17:42:55.990 回答
1

如果你给一个“.maincontent .port”的选择器（注意之间的空格），那么为了匹配这个，你必须有一个带有“maincontent”类的标签，并且嵌套在里面你必须有一个带有“类”的标签端口”，例如

<div class="maincontent">
  <p class="port">
  ... whatever ...
  </p>
</div>

如果您想要一个标签来获取两个类的属性，请使这些类不相关，然后给两个类名以空格分隔。

CSS:
.maincontent {... whatever ...}
.port {... whatever ...}

HTML:
<div class="maincontent port">

我不确定当您同时提供背景颜色和背景图像时会发生什么。如果它们发生冲突，一个简单的方法是将背景颜色分解为另一个类，然后调用适当的组合。另一种选择是将“！important”添加到背景图像中。这告诉系统给予它更高的优先级。此外，一般规则是较长的说明符链优先于较短的链，因此“.maincontent .port”应该胜过“.maincontent”中的任何内容。

于 2012-09-06T17:46:49.007 回答
1

您的 css for.maincontent.port覆盖背景颜色，并将其设置为默认值（透明）。如果你想从你那里继承黑色背景颜色，.maincontent你需要这样做：

.maincontent.port {
    background-image: url(../images/portduck.jpg)
    background-repeat: no-repeat;
}
于 2012-09-06T18:02:11.047 回答