背景图片的自适应

曾经遇到一个问题, 为menu的 static item设置背景图片,是图片拉伸填充真个MenuItem的整个区域,而不重复显示.

使用css的 滤镜,来实现:

<asp:Menu ID="Menu1" runat="server" onmenuitemclick="Menu1_MenuItemClick" >
    <StaticHoverStyle BackColor="Yellow"  CssClass="static"/>
    <DynamicHoverStyle BackColor="Orange" />
    <StaticMenuItemStyle CssClass="item"  />
    <DynamicMenuItemStyle CssClass="item" />
    <StaticSelectedStyle CssClass="selected" />
    <DynamicSelectedStyle CssClass="selected" />
        <Items>
            <asp:MenuItem Text="Page1" Value="Page1" Target="myiframe">
            </asp:MenuItem>
            <asp:MenuItem  Text="page2" Value="page2" Target="myiframe">
            </asp:MenuItem>
            <asp:MenuItem  Text="page3" Value="page3" Target="myiframe">
            </asp:MenuItem>
        </Items>
    </asp:Menu>

css 滤镜:

 

 .item
    {
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='../image/button-search.gif',sizingMethod='scale');
        }

posted @ 2008-08-21 14:51  Amanda2007  阅读(566)  评论(0编辑  收藏  举报