在背景图像 inflex 4 顶部显示另一个图像

Question

我使用皮肤类创建了一个带有背景图像的应用程序。我想在应用程序的图像顶部显示一些图像。您能否建议如何在 flex 4 中执行此操作。 代码在这里：

BackGroundImageskin:-

<fx:Metadata>
    [HostComponent("spark.components.supportClasses.SkinnableComponent")]
</fx:Metadata>
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states> 
<s:BitmapImage source="@Embed('Img/asianwoman.jpg')" left="0" right="0"  top="0" bottom="0" smooth="true"/>

主要应用：-

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

        <s:Group visible="true">
            <mx:Image source="Img/News1.png" visible="true" />
            <s:Button label="My Button"/>
        </s:Group>  

这里不显示New1.png，只显示背景图片

Answer 1

将此用于您的皮肤（假设标准 Web 应用程序）：

<s:Skin xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">

<fx:Metadata>
    <![CDATA[ 

    [HostComponent("spark.components.Application")]
]]>
</fx:Metadata>


<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" />
    <s:State name="disabledWithControlBar" />
</s:states>

<s:BitmapImage top="0" left="0" bottom="0" right="0" source="@Embed('img.jpg')" smooth="true" />

<s:Group top="0" left="0" bottom="0" right="0">
    <s:layout>
        <s:VerticalLayout horizontalAlign="justify" gap="0" />
    </s:layout>

    <!---
        @private
        Application Control Bar
    -->
    <s:Group id="topGroup" minHeight="0" minWidth="0" includeIn="normalWithControlBar, disabledWithControlBar">

        <!-- layer 0: control bar highlight -->
        <s:Rect top="0" left="0" bottom="1" right="0">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" />
                    <s:GradientEntry color="0xD8D8D8" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>

        <!-- layer 1: control bar fill -->
        <s:Rect top="1" left="1" bottom="2" right="1">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xEDEDED" />
                    <s:GradientEntry color="0xCDCDCD" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- layer 2: control bar divider line -->
        <s:Rect height="1" left="0" bottom="0" right="0" alpha="0.55">
            <s:fill>
                <s:SolidColor color="0x000000" />
            </s:fill>
        </s:Rect>

        <!-- layer 3: control bar -->
        <!--- @copy spark.components.Application#controlBarGroup -->
        <s:Group id="controlBarGroup" top="1" left="0" bottom="1" right="0" minHeight="0" minWidth="0">
            <s:layout>
                <s:HorizontalLayout paddingBottom="7" paddingLeft="10" paddingRight="10" paddingTop="7" gap="10" />
            </s:layout>
        </s:Group>
    </s:Group>

    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0" />

</s:Group>

</s:Skin>