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

＆＃13;

<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>

＆＃13;

编辑：

按钮的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：

我在评论和下面的答案中尝试了所有解决方案，但似乎问题是＆＃34; width：auto＆＃34;在＆＃34; .button＆＃34; Site.css中的css。当我评论这一行时，更改生效，但它也会混淆我的Web应用程序中的每个其他按钮宽度。任何想法如何我可以覆盖我的＆＃34; .newbutton＆＃34;样式？

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中添加此内容即可。根据您的要求更改背景上的网址。

Answer 2

尝试使用

background-position: left;

它会改变图像的位置或增加按钮的宽度

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

2 个答案: