asp.net - 如何在 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"/>