Question

好的这里是样式表代码：我希望ButtonTrans.png跨越顶部的每个按钮，自动调整按钮的大小。

    .ButtonPanel {
      position: absolute;
      top: 0px;
      left: 770px;
      width: 500px;
      height: 44px;
      font-size: 12px;
      font-weight: bold;
      margin: 0px !important;
      padding: 0px !important;
    }

    .functionbutton {
      padding: 8px 4px;
      margin: 6px 6px;
      background: #3292aa;
      background: -webkit-linear-gradient(top, #3292aa 0, #017795 100%);
      background: linear-gradient(to bottom, #3292aa 0, #017795 100%);
      border-color: #017795;
      box-shadow: none;
      color: #fff;
      border-radius: 7px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
    }

    .functionbutton:hover {
      background: #33a3c0 !important;
      background: -webkit-linear-gradient(top, #33a3c0 0, #038eb2 100%) !important;
      background: linear-gradient(to bottom, #33a3c0 0, #038eb2 100%) !important;
      box-shadow: none !important;
      border-color: #038eb2 !important;
    }

    .toolbutton {
      padding: 8px 4px;
      margin: 6px 6px;
      background: #f8f8f8;
      background: -webkit-linear-gradient(top, #f8f8f8 0, #f2f2f2 100%);
      background: linear-gradient(to bottom, #f8f8f8 0, #f2f2f2 100%);
      border-color: #ccc;
      box-shadow: 0 1px 0 0 #fff inset;
      outline: 0;
      border: 1px solid #ccc;
      text-decoration: none;
      border-radius: 7px;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
    }

    .toolbutton:hover {
      background: #fdfdfd !important;
      background: -webkit-linear-gradient(top, #fdfdfd 0, #fafafa 100%) !important;
      background: linear-gradient(to bottom, #fdfdfd 0, #fafafa 100%) !important;
      border-width: 1px !important;
      border-style: solid !important;
    }

这是页面中实际按钮的HTML。我希望ButtonTrans.png与每个按钮的大小相同，并直接位于按钮顶部，以显示单击按钮的效果。我目前无法更改任何服务器端代码，因此现在必须修复此问题。我附上了我正在寻找的图像。我附上的图片有style =＆＃34; postions：absolute; height：30px; width100px：＆＃34;增值。 and idea of what I am trying to do

    <asp:Panel ID="ButttonPanel" runat="server" CssClass="ButtonPanel">

      <div class="toolbutton">
        <label id="FlatPDFLbl">PDF</label>
        <asp:ImageButton ID="FlatPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Flat PDF from Template" TabIndex="-1" OnClick="FlatPDFBtn_Click"></asp:ImageButton>
      </div>

      <div class="toolbutton">
        <label id="FullPDFLbl">Fillable PDF</label>
        <asp:ImageButton ID="FullPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Fillable PDF from Template" TabIndex="-1"
OnClick="FullPDFBtn_Click"></asp:ImageButton>
      </div>

      <div class="functionbutton">
        <label id="SaveLbl">Save</label>
        <asp:ImageButton ID="SaveBtn" CssClass="SaveBtn" runat="server" commandname="Launch" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Save changes to this customer" TabIndex="-1" OnClick="SaveBtn_Click"></asp:ImageButton>
      </div>

    </asp:Panel>

透明按钮使用ImageButton类asp

0 个答案: