背景图片的自适应

曾经遇到一个问题， 为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');
        }