asp.net - ASP.NET Web アプリケーションで .psd 層状ボタンを使用する方法

Question

.psd ボタンがあります。btn、btn_hover、btn_active の 3 つのレイヤーがあります。ASP.NET Web アプリケーションで使用できますか? ImageButton コントロールなどを使用する必要がありますか? ホバーとアクティブな 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"/>