1

class を使用して div の背景に画像をレンダリングしようとしていますhead。

私のapplication ビューは Haml で書かれており、本体は次のように定義されています。

%body
    .container
        .head
            .sixteen_columns
            .top-nav

application 私のスタイルシートに含まれているのは次のとおりです。

.head {
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

画像のパスを指定するためにいくつかのバリエーションを試し、画像名を何度か変更しましたが、役に立ちませんでした。

どうした？

4

5 に答える 5

0

asset_pathスタイルシートで画像を参照するときは、ヘルパー の使用を検討してください。ドキュメントはここにあります（ 2.2.1をチェックしてください）あなたがリストしたCSSのコンテキストではあなたはヒーブします

.head {
  background-image:url(<%= asset_path 'background_image.jpg'%>); 
  width:100%; 
  height:auto;
}

注：これには、スタイルシートがerbである必要があります。

そうすることで、パスを明示的に指定するよりも多くの利点があります。1つは、新しいバージョンのリリースでrailsアプリケーションの構造が変更されるため、そのイメージを適切に参照するためにコード内で何も変更する必要がないことです。

これは、画像を参照するだけではやり過ぎのように思えるかもしれませんが、使用するのは難しいが素晴らしいRailsの多くの規則の1つです。アプリケーションが成長し、変化するにつれて、うまくいけば、時間のテストに耐えられるようになります。

于 2012-07-24T03:17:24.660 に答える
0

Rails 3.1 以降を使用していて、画像に対して適切にアセット パイプラインを使用していると仮定すると、次の手順で画像ファイルを含めることができます。

.head {
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto;
}

この理由は、アセット パイプラインの仕組みによるものです。実行時にアセットをコンパイルし、すべてのアセットを というフォルダーに配置します/assets/。また、サブフォルダーの構造化も無視し、すべてをルート/assets/フォルダーにダンプし/assets/subfolder/ます。.

于 2012-07-24T02:44:13.947 に答える
0

解決：

それは2つのことの組み合わせであることが判明しました。背景画像には次の形式を使用しました。

background-image: url(../images/background_image.jpg);

ただし、 は の.head divと renbdering していましheightた0。テストするために固定の高さを追加したところ、すべてが完全に表示されました。ここからこれで作業できます。

助けてくれてありがとう！

于 2012-07-24T14:32:12.833 に答える
0

実行してみてください

rails -v

コンソールから、使用している Rails のバージョンを確認します。

Rails 2.x アプリケーションを実行しているようですね。これは、/public ディレクトリから画像や js などを提供していることを意味するはずです。css で背景画像を設定する際につまずいた重要な落とし穴の 1 つは、指定するパスが、プロジェクト自体のルート ディレクトリではなく、スタイルシートがあるディレクトリ (例: /public/stylesheets)に対して相対的であることです。

スタイルシートがある場所から 1 つ上のディレクトリに移動するようにパスを変更しようとしましたか?

.head {
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

編集: bg 画像への他のパスは何を試しましたか?

その他の可能性は次のとおりです。

  background-image: url(images/background_image.jpg); 
  background-image: url('../images/background_image.jpg');

もう 1 つチェックすることは、ビューをロードし、インスペクター (Ctrl Shift + I) を使用して Google Chrome で div を調べることです。div を選択し、Chrome が割り当てているスタイルを調べます。

また、まだ background_image.jpg という名前になっていることを再度確認してください

于 2012-07-24T03:43:06.370 に答える
0

Rails 4 では、css および sass ヘルパー image-url を使用できるようになりました。

div.logo {background-image: image-url("logo.png");}

背景画像が表示されない場合は、css ファイルでそれらをどのように参照しているかを検討してください。

于 2013-08-01T20:28:06.180 に答える