2012-01-11 14 views
2

これは、CSSのコードの例です:今動的に変更背景は

block { 
     margin-left: 1in; 
     margin-top; 1in; 
     position: absolute; 
     background-image: url('../images/myimage.png'); 
     background-size: 100% 100%; 
    } 

私は複数のHTMLページに、このCSSファイルを使用していますが、このイメージを変更できるようにする必要性が存在1ページあたり。多分HTMLを通して?

<block><somehowchangeimagehere></somehowchangeimagehere></block> 

? HTML & CSSのみを使用してください。

+0

すべてのページに同じイメージが必要ですか、別のイメージ各ページに? – DOK

答えて

2

これを処理する1つの方法は異なるサブクラスを作り、その後、各ページのBODYタグにクラスを置くことです:

<body class="pageOne"> 

はCSS:

.pageOne block { 
    background-image: url('../images/myimageOne.png'); 
} 

.pageTwo block { 
    background-image: url('../images/myimageTwo.png'); 
} 
+1

おそらくこれを実行する最良の方法です。ありがとう! – Ridz

+0

ブロックが定義されたら、この例のように、ブロック全体ではなく差分をサブクラス化するだけでよいことに注意してください。 –

0

イメージのURLは、HTMLページのURLではなく、CSSのページURLを基準にしています。それはうまくいくはずです。

+0

イメージは明らかに機能しますが、私がしようとしていることを理解していません。ページごとにmyimage.pngを変更しようとしています。どうすればこれを達成できますか? – Ridz

+0

@Ridz:各ページでカスタムCSSを使用しますか? –

+0

@Ridz:イメージが各ページで異なるようにするには、外部CSSファイルから画像を省略して、代わりに「 'をHTMLページに追加します。 –

0

あなたはこの中のようなものを挿入した場合あなたのスタイルシートを取り込んだ後のあなたのHTMLは、スタイルシートを上書きすることができます:

<style type="text/css"> 
    block { 
     background-image('some_image_thats_specific_to_the_page'); 
    } 
</style> 
関連する問題