css - 在 CSS 中向按钮文本添加填充以显示背景图像

Question

我已经在我的 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 中使用了填充，但它没有做任何改变。 您可以在下面的代码片段中找到按钮图像。

<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”样式中的宽度吗？

Answer 1

在这里找到工作演示 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。