通過css本地化圖像

我工作的網站上有很多包含文本的圖像。這包括按鈕和導航。通過css本地化圖像

爲了支持本地化，我包含了2個css文件。一種具有非語言特定屬性（字體，顏色...）和具有特定語言屬性的屬性。取決於他選擇的語言，只有1個語言特定文件被提供給用戶。

語言特定的文件（/content/en/Site.css，/content/de/Site.css ..）大約有背景圖像

div.topHeader p#searchHeader 
{ 
    background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center; 
}

該工程進展順利，但我將有很多的信息重複的代碼。在英語中，CSS將是：

div.topHeader p#searchHeader 
{ 
    background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center; 
}

我有一對夫婦的語言這就是爲什麼它會真的付出了優化這一點。有一個更好的方法嗎？

來源

2009-08-03 Mathias F

只需從主CSS中提取語言特定部分到每種語言的新CSS，並將該CSS動態包含在頁面中。這樣就不必管理大量的CSS類。

來源

2009-08-03 09:43:28

您可以嘗試將所有外部圖形引用合併到單獨的CSS中，並在代碼中單獨引用它。

如果您動態地指定CSS中的表單路徑，那麼您可以編寫一個處理程序來處理您對CSS的特定請求，在服務器端從文件中讀取它，根據需要替換所有語言標記部分（文檔。替換（「{lang}」，「de」）），然後將修改後的CSS返回。但這需要一些工作。

來源

2009-08-03 09:43:27 User

您可以使用一種文件site.css.aspx或其他類似文件爲每種語言設置不同的CSS文件並處理該文件，然後根據提供的POST/GET變量語言或接受頭文件輸出路徑。

查看類似的問題here

來源

2009-08-03 09:43:28 beggs

好主意！ ........... – 2009-08-03 22:03:54

一開始，你可以使用的background-image代替background保存重複重複，定位，滾動和色彩信息。

要真正優化它，我只需根據用戶的本地化動態地提供CSS。例如：通過PHP腳本或其他東西。你可以做一些像background-image: url(/images/<?=$lang ?>/headers/search_lo.gif)。

來源

2009-08-03 09:43:31 dampkwab

不知道，但u能有這樣的事情，

div.topHeader p#searchHeader { 
background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; } 


div.topHeader p#searchHeader { 
background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }

，其中最後一個字後__（dauble下劃線）將動態添加

爲

div.topHeader p#searchHeader { 
background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }

來源

2009-08-03 09:45:39 Posto

一個簡單的解決辦法是根據其語言環境將類或ID應用於HTML中的body標籤。然後在樣式表中，你可以這樣做：

div.topHeader p#searchHeader 
{ 
    background: no-repeat scroll center center; 
} 

body.en div.topHeader p#searchHeader 
{ 
    background-image: url(/images/en/headers/search_lo.gif); 
} 

body.de div.topHeader p#searchHeader 
{ 
    background-image: url(/images/de/headers/search_lo.gif); 
}

仍然有將是一個位複製的，但你降低你必須寫爲每個本地化的CSS量。

來源

2009-08-03 09:48:02

您可以創建PHP或類似的動態CSS。下面是一個PHP例子：

的index.html：

<link rel="stylesheet" type="text/css" media="screen" href="style.php">

style.php：

<?php 
    header("Content-type: text/css"); 
    $lang = $_SESSION['however_you_are_detecting_lang']; 
    ?> 
    body { 
    background-image:url(images/<?=$lang?>/image.png); 
    }

，將獲取的圖像/ EN/image.png或圖像/德/ image.png

來源

2009-08-03 09:51:32 doctororange

通過css本地化圖像

回答

相關問題