如何在ASP.NET Web应用程序中使用.psd分层按钮

Question

我有.psd按钮。它有3层：btn，btn_hover和btn_active。 是否可以在ASP.NET Web应用程序中使用它？我应该使用ImageButton Control还是别的什么？我如何定义悬停和活动img？ 谢谢你的帮助！

Answer 1

您可以使用ASP.Net Button或ASP.Net LinkBut​​ton，并使用CSS设置样式。

注意：您不能立即使用psd文件。您需要转换为png（或jpg）图像。

最简单的方法是使用精灵图像（参见下面的代码），并在悬停和活动时移动背景位置。

按钮

<style type="text/css">
    .submit { 
        border: 1px solid #563d7c; 
        border-radius: 5px; color: white; 
        padding: 5px 10px 5px 25px; 
        background-image: url(https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6); 
        background-position-y: 465px; 
        background-position-x: 5px; 
        background-color: #563d7c; 
    }
    .submit:hover {
        background-position-y: 435px; 
        background-position-x: 5px; 
    }
    .submit:active {
        background-position-y: 415px; 
        background-position-x: 5px; 
    }
</style>
<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />

超链接

<style type="text/css">
    .link-button { 
        border: 1px solid #563d7c; 
        border-radius: 5px; color: white; 
        padding: 5px 10px 5px 25px; 
        background-image: url(https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6); 
        background-position-y: 465px; 
        background-position-x: 5px; 
        background-color: #563d7c; 
    }
    .link-button:hover {
        background-position-y: 435px; 
        background-position-x: 5px; 
    }
    .link-button:active {
        background-position-y: 415px; 
        background-position-x: 5px; 
    }
</style>
<asp:LinkButton runat="server" ID="LinkButton1" CssClass="link-button" Text="Submit"/>