使用外部CSS可以做到這一點嗎？

Question

考慮following example：

HTML：

<div id="julia" class="photo"></div> 
<div id="rachel" class="photo"></div> 
<div id="martin" class="photo"></div> 

CSS：

.photo { 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
} 
.photo:hover { 
    background-position: -60px 0; 
} 
#julia { 
    background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png'); 
} 
#rachel { 
    background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png'); 
} 
#martin { 
    background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png'); 
} 

這個例子演示了我想達到的目標。

HTML由Rails 3應用程序生成。它應該顯示特定組中的所有用戶（此信息存儲在數據庫中）。換句話說，要顯示的用戶列表可能會有所不同。

的問題是，我不希望有這樣的代碼：

#username { 
    background-image: url('/path/to/username/sprite'); 
} 

爲每個現有的用戶名。而且，如果添加新用戶，我不想更改CSS。

現在的問題是：是否有可能實現相同的效果使用外部CSS？

Answer 1

就在網上的每個div background-image樣式屬性：

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');" id="julia" class="photo"></div> 
<div style="background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');" id="rachel" class="photo"></div> 
<div style="background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');" id="martin" class="photo"></div> 

沒有必要使其複雜化。

Answer 2

您可以將圖像移動到您的HTML中，然後讓您的CSS將懸停標籤應用於圖像，就像您設置的一樣。

難以測試，因爲圖像主機不喜歡盜鏈。就拿這裏看看fiddled

HTML

<div id="julia" class="photo"><img src="http://www.mypicx.com/uploadimg/1312875436_05012011_2.png"/></div> 
<div id="rachel" class="photo"><img src="http://www.mypicx.com/uploadimg/1932001963_05012011_1.png"/></div> 
<div id="martin" class="photo"><img src="http://www.mypicx.com/uploadimg/2082029375_05012011_3.png"/></div> 

CSS

.photo img { 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
} 
.photo img:hover { 
    background-position: -60px 0; 
} 

Answer 3

如果你的外部CSS文件是靜態的，然後它在邏輯上是不可能的，我想，既然URL信息是動態的。

編輯： 如果我理解正確的話，你的問題是不是讓懸停招工作（因爲它的工作原理...），但是如何設置背景圖像屬性爲每一個DIV（每次都有不同的值 - 動態信息）。

因此，像這裏的其他人所說的可以使用PHP，jsp等頁面的動態呈現。

也就是說，也許你可以使用一個動態的css文件，你寫在服務器端。 （但很奇怪）

http://css-tricks.com/can-we-prevent-css-caching/

Answer 4

你是什麼意思外部做？單獨的文件或css文件完全來自不同的機器？

據我所知，這些圖像改變的唯一方法是如果您將它設置爲更改（動態）爲每個用戶。假設其照片的路徑存儲在數據庫中，則可以使用php或其他動態語言來嵌入img元素，其中src在html模板中是動態的。

例子：

<?php 
function getUserImage(){ 
//code to get img path from database 
return result; 
} 
?> 
<img src="<?php print getUserImage(); ?>" alt="" /> 

取決於誰登錄，圖像就會從數據庫中的用戶ID不同變化。