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

【问题标题】：How to use .psd layered button in ASP.NET Web Application如何在 ASP.NET Web 应用程序中使用 .psd 分层按钮
【发布时间】：2013-08-06 02:39:53
【问题描述】：

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

【问题讨论】：

您可能需要使用一些 CSS 来获得该效果。我认为没有内置控件。

标签： asp.net css web-applications button psd

【解决方案1】：

您可以使用 ASP.Net Button 或 ASP.Net LinkButton，并使用 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"/>

【讨论】：