css - 在CSS中为按钮文本添加填充以使背景图像出现

我在aspx页面上添加了一个asp按钮。使用CSS我添加了一个背景图像，如下所示：

 .newbutton {
         background: url(../Images/add4.png);
          background-repeat:no-repeat;
        background-size:18px 18px;
        border-radius: 5px;
         padding: 5em 10em 5em 25em;
        }

aspx按钮：

 <asp:Button ID="BtnNewRecord" runat="server" Text="New Record"  CssClass="newbutton" >

问题在于按钮文本将覆盖背景图像。我在上面的CSS中使用了padding，但是它没有做任何更改。
您可以在下面的代码段中找到按钮图像。

<a href="http://tinypic.com?ref=20jka4y" target="_blank"><img src="http://i57.tinypic.com/20jka4y.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

编辑：

按钮的HTML标记：

  <input type="submit" name="ctl00$MainContent$BtnNewRecord" value="New Record"  id="MainContent_BtnNewRecord" class="newbutton" />

编辑＃2：

我在Site.css中找到了这个：

 input[type="submit"],
input[type="button"],
button {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
}

这可能与我的.newbutton样式冲突吗？如果是这样，我该如何消除此冲突？

编辑3：

我尝试了注释和下面的答案中的所有解决方案，但似乎问题出在Site.css中“ .button” css中的“ width：auto”。当我对此行发表评论时，所做的更改已生效，但同时也弄乱了我的Web应用程序中的所有其他按钮宽度。
有什么想法可以覆盖“ .newbutton”样式中的宽度吗？

最佳答案

在JsFiddle中找到有效的演示。我想这就是您想要的。

.newbutton {
            background: url("https://cdn3.iconfinder.com/data/icons/vista-general/16/add.png") no-repeat scroll 0 0 / 18px 18px #ccc;
            border-radius: 5px;
            padding: 5px 10px 5px 25px;
            border: 1px solid #ccc;
            background-position: center left 5px, center left 5px;
        }

只需将其添加到您的.newbutton CSS中即可。根据您的背景更改URL上的URL。

关于css - 在CSS中为按钮文本添加填充以使背景图像出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29538410/