如何在Flex 4中設置CSS文件中的backgroundImage屬性？

我想在background中設置backgroundImage屬性爲「../img/foo.png」。我的代碼如下所示：如何在Flex 4中設置CSS文件中的backgroundImage屬性？

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 

    .bg { 
     background-image   : "../img/foo.png"; 
     background-image-fill-mode : repeat; 
    } 
</fx:Style> 

<s:BorderContainer width="200" height="200" styleName="bg" />

它不起作用。我不想使用嵌入式圖像，所以

background-image : Embed("../img/foo.png");

的作品，但不適合我。有什麼辦法可以實現它嗎？

來源

2013-04-03 paddlesteamer

的BorderContainerSkin沒有預料到的背景圖像的URL。

如果你看看皮膚，它使用BitmapFill類作爲背景圖像。皮膚將您指定的背景圖像作爲背景圖像，並將其設置爲用於容器實際背景的BitmapFill的source。

作爲文檔（即我上方連結）表示，即BitmapFill會將的源可以是下列之一：

位圖或BitmapData實例。
表示DisplayObject的子類的類。 BitmapFill實例化類並創建它的位圖呈現。
DisplayObject的一個實例。 BitmapFill將其複製到位圖中進行填充。

因此，如果您不想嵌入圖像，則需要手動加載圖像並將該位圖數據作爲CSS樣式的值提供。或者創建使用<s:Image />組件作爲背景的自己的皮膚。

要使用默認的皮膚，你可以做這樣的事情：

使用加載器來加載圖像
加載完成時，從加載的內容獲取的位圖數據
申請作爲背景圖像

在this answer中詳細說明了執行加載和獲取位圖數據的步驟。

PS：因爲您將在代碼中執行此操作，您可能無法使用CSS樣式來設置背景。你必須使用setStyle()方法來設置它的ActionScript：

borderContainer.setStyle("backgroundImage", loadedBitmapData);

請注意，雖然你可以使用Flex的CSS複姓樣式名稱，在代碼中你不能指連字符樣式名稱和需要使用駱駝正如我上面所做的那樣。

來源

2013-04-06 23:38:35

嘗試包括url讓它知道你background-image的路徑：

.bg { 
    background-image   : url("../img/foo.png"); 
    background-image-fill-mode : repeat; 
}

來源

2013-04-03 16:38:56 Eli

這也行不通。 – paddlesteamer

如何在Flex 4中設置CSS文件中的backgroundImage屬性？

回答

相關問題