3

私はこれに対する修正を見つけようとして上下に検索しましたが、これまでのところ何も機能していません。クラスを持つ section 要素があり、サイトのメイン ページで繰り返されます。唯一の違いは、背景画像の変更です。ただし、背景画像を表示することはできません。少しいじった後、セレクターをまったく認識できないようです。

次に例を示します。

ホームページのボックスの 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 の間にスペースを入れてみました。クラスの順序を変更してみましたが、何も修正されませんでした。また、ボックスの幅と高さをオーバーライドしようとしても実験しましたが、何も起こらなかったため、セレクターが問題であるか、box-shadow に関係していると思われます。

どんな助けでも大歓迎です。ありがとう！

4

3 に答える 3

2

1- イメージ パスが正しいことを確認します (開発者ツールなどで URL にカーソルを合わせるか、ネットワーク パネルを確認します)。

2- display: ブロックをそのクラスの CSS に追加してみてください。

于 2012-09-06T17:42:55.990 に答える
1

css for.maincontent.portは、background-colorをオーバーライドし、デフォルト（透過）に設定します。黒の背景色を継承する場合は、次の.maincontentようにする必要があります。

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

「.maincontent .port」のセレクターを指定する場合 (間にスペースがあることに注意してください)、これに一致させるには、「maincontent」のクラスを持つタグが必要であり、その中にネストされた「」のクラスを持つタグが必要です。ポート」のように

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

1 つのタグで 2 つのクラスのプロパティを取得する場合は、クラスを無関係にしてから、両方のクラス名をスペースで区切って指定します。

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

HTML:
<div class="maincontent port">

背景色と背景画像の両方を指定するとどうなるかわかりません。それらが衝突している場合、簡単にできることの 1 つは、背景色を別のクラスに分割してから、適切な組み合わせを呼び出すことです。もう 1 つのオプションは、背景画像に「!important」を追加することです。これにより、システムに高い優先度を与えるように指示されます。また、一般的な規則として、指定子の長いチェーンは短いチェーンよりも優先されるため、「.maincontent .port」は「.maincontent」だけのものより優先されます。

于 2012-09-06T17:46:49.007 に答える