0

baraをネストするa という2 つの div クラスがあります。menu

background-imagebarクラスに配置されたときに適切にスケーリングまたはレスポンシブされず、クラスに配置されたときに表示されずmenu、レスポンシブにスタイルするのに適しているようです。

また、画像は png ですが、クリア スペースに空白が表示されます。これはなぜでしょうか?

現在、両方をインライン スタイルとしてテストしていますが、「css」フォルダーにネストされた外部スタイル シートで、「css」フォルダーのパスに隣接する「img」フォルダーで画像をどのように指すことができますか?

応答性のために...背景画像はブラウザの高さ/幅に応じて拡大縮小する必要があります..

現在の CSS:

.bar {
  position: static;
  bottom: 0;
  height: 10%;
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.menu {
  display: inline-block;
  background-image: url("img/menu-bar.png");
}
4

1 に答える 1

3

あなたはここでいくつかの質問をしています。したがって、順番に：

デフォルトでbackground-imageは、実際のサイズで繰り返されます。スケーリングする場合は、を設定しbackground-size、おそらく無効にする必要がありますbackground-repeat。イメージをコンテナーのサイズに合わせて拡大縮小するには、コンテナーを小さい方の寸法で塗りつぶし、残りを切り取るために設定background-size: 100% 100%;または使用できます。background-size: coverもう 1 つのオプションはbackground-size: contain、画像のクリッピングを回避するために使用することです。

パスの問題に関しては、パスは常に CSS ファイルに対して相対的です。したがって、あなたが言うように、スタイルシートがcssフォルダーに隣接するimgフォルダーにある場合は、フォルダーからの相対パスを設定するだけですcss。

最終的な CSS は次のようになります。

.menu {
  display: inline-block;
  background-image: url(../img/menu-bar.png);
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
}

引用符は不要なので削除したことに注意してください。

最後に、透明度が機能しない場合は、画像ファイル自体に問題があるはずです。CSS は PNG の透過性とは何の関係もありません。グラフィック エディタが適切な透明度で PNG を保存していることを確認してください。

于 2013-08-21T17:43:49.223 に答える