0

私の風景: Drupal 7 に Omega テーマがインストールされています。

私の問題: CSS (セクションヘッダー) の特定のゾーンにランダムな背景を設定する必要があります。レスポンシブ デザインのため、4 つの個別の css ファイルがあり、ファイル名は同じですが、唯一の違いは _mobile _narrow _normal _wide という接尾辞です。いくつかの単純な行を使用して、css ファイルに背景を設定しました。

#section-header {
  background: url(../images/sf_header_wide.jpg) no-repeat top center;
  height: 390px;
  margin: 0;
  padding: 0;  
}

背景に複数の画像を追加する必要があります。外部ソース (たとえば、私のテンプレート php ファイル) からファイル名をインポートして、背景行を追加せずにこのようなものを取得できるかどうかを知りたいです。レスポンシブ デザイン用の css ファイルを分離したため、template.php ファイル

#section-header {
      background: url("../images/<?php echo $fileimage; ?>_wide") no-repeat;
      height: 390px;
      margin: 0;
      padding: 0;  
    }

私が必要とするものを手に入れることは可能ですか？

4

1 に答える 1

1

Web ブラウザーが CSS ファイルをキャッシュするため、この方法はお勧めしません。その上、これは通常の慣習ではなく、

ただし、代わりにできることがいくつかあります。1つはページヘッダー自体の中にあり、そのスタイルシートをそのように生成するだけです

<head>
<link rel="stylesheet" type="text/css" href="primaryStyleSheet.css" media="screen" />
[...]All other head stuff, imports, responsive style sheet stuff here
<style>
/* Define this style AFTER the other CSS files are imported to be sure it loads */
#section-header {
  background: url("../images/<?php echo $fileimage; ?>_wide") no-repeat;
  height: 390px;
  margin: 0;
  padding: 0;  
}
</style>
</head>

!importantさらに、各 CSS 定義に追加することもできます (つまりheight: 390px !important;) 。

于 2013-05-14T00:38:45.697 に答える