Question

我正在尝试使用Css和asp.net中的以下代码创建一个玻璃按钮

我想让唯一的背景应该是透明的，但文字应该是可见的

鼠标悬停之前或之后

但是我无法使按钮透明。我给opcitt值0

包括文字在内的整个按钮变得透明。但我想只有背景应该是透明的，文字应该是可见的。

请帮助我

我的Css代码：

.classnameL
 {

         text-indent:1px;
        display:inline-block;

        font-family:Arial;
        font-size:17px;
        font-weight:bold;
        font-style:normal;
         height:32px;
        line-height:50px;
        width:144px;
        padding 0px 0px 0px 0px;

        text-align:center;
        cursor: pointer;
        color:#ffffff;
        opacity:0;

   }
 .classnameL:hover 
 {
         background:-webkit-gradient( linear, left top, left bottom,color-stop(0.05,      #77d42a), color-stop(5, #5cb811) );
          background:-moz-linear-gradient( center top, #132354 60%, #c0C0C0 90% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a',endColorstr='#5cb      811');
         background-color:#5cb811;
         color:#ffffff;
         opacity:1;
  }
  .classnameL:active 
 { 
          position:relative;
          top:1px;
  }

我的Asp.net标记代码：

                                                     <td style="text-align: left"  >
              <asp:Button ID="btnTower" Text="Tower" runat="server"       class="classnameL"  
                       Font-Bold="False" Height="25px" Width="100%"       ForeColor="White"    ></asp:Button>
                                 </td>

Answer 1

您可以使用background-color:transparent; CSS属性

.classnameL
  {
  ....
  background-color:transparent;
  }

Answer 2

如果我理解正确，您希望文本始终显示，并且当您悬停时，背景会变得透明。由于某种原因你的Text标签不起作用所以我摆脱它，我做了很多代码和一些格式的快速重构

<td style="text-align: left">
<asp:Button ID="btnTower" runat="server" class="classnameL" Height="25px" Width="100%"/>Tower</asp:Button>
</td>

<style type="text/css">
  .classnameL {
    background: -webkit-gradient( linear, left top, left bottom,color-stop(0.05, #77d42a), color-stop(5, #5cb811)); 
    text-indent: 1px;
    display: inline-block;
    font-family: Arial;
    font-size: 17px;
    font-weight: bold;
    font-style: normal;
    height: 32px;
    line-height: 2em;
    width: 144px;
    text-align: center;
    cursor: pointer;
    color: #000;
  }
  .classnameL:hover {
    background: transparent;
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a',endColorstr='#5cb811 ');
  }

  .classnameL:active { 
    position:relative;
    top:1px;
  }
</style>

Answer 3

您只需在按钮标记

中添加以下属性即可

style="background-color: Transparent"

尝试用此

替换您的asp代码

<td style="text-align: left">
<asp:Button ID="btnTower" Text="Tower" runat="server"class="classnameL"  
  Font-Bold="False" Height="25px" Width="100%" ForeColor="White"  style="background-color: Transparent">
</asp:Button>
</td>

如何才使按钮背景透明

3 个答案: