Question

我有一个CSS按钮定义，如下所示：

.btn {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        padding: 12px 24px;
        border: 1px solid #acacac;
        border-radius: 8px;
        background: #f5f5f5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#acacac));
        background: -moz-linear-gradient(top, #f5f5f5, #acacac);
        background: linear-gradient(to bottom, #f5f5f5, #acacac);
        -webkit-box-shadow: #ffffff 0px 0px 40px 0px;
        -moz-box-shadow: #ffffff 0px 0px 40px 0px;
        box-shadow: #ffffff 0px 0px 40px 0px;
        text-shadow: #ffffff 1px 1px 1px;
        font: normal normal bold 20px arial;
        color: #111111;
        text-decoration: none;
    }
    .btn:hover,
    .btn:focus {
        border: 1px solid #f5f5f5;
        background: #ffffff;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cecece));
        background: -moz-linear-gradient(top, #ffffff, #cecece);
        background: linear-gradient(to bottom, #ffffff, #cecece);
        color: #111111;
        text-decoration: none;
    }
    .btn:active {
        background: #acacac;
        background: -webkit-gradient(linear, left top, left bottom, from(#acacac), to(#acacac));
        background: -moz-linear-gradient(top, #acacac, #acacac);
        background: linear-gradient(to bottom, #acacac, #acacac);
    }
    .btn:before{
        content:  "\0000a0";
        display: inline-block;
        height: 24px;
        width: 24px;
        line-height: 24px;
        margin: 0 4px -6px -4px;
        position: relative;
        top: 0px;
        left: 0px;
        background: url("../img/rn.png") no-repeat left center transparent;
        background-size: 100% 100%;
    }

我的页面上需要几个按钮，但是有不同的图标。

我试过这样的事情：

.client{    
    background: url("../img/client.png") no-repeat left center transparent;
    background-size: 100% 100%;
}
.poslovnica{    
    background: url("../img/poslovnica.png") no-repeat left center transparent;
    background-size: 100% 100%;
}

用以下方式调用它：

<p><a class="btn client" href="#">Klijenti</a></p>
<p><a class="btn poslovnica" href="#">Poslovnice</a></p>

但那没用。

我仍在努力使用HTML和CSS，所以我想远离java，jQuery等，直到我对HTML / CSS更加舒适。

这是jsFiddle中的工作测试：jsfiddle.net/8hKGf/3

Answer 1

嗯，你差不多......看看这个，用你的代码。

http://jsfiddle.net/fg7Ya/

它将为每个按钮输出相同的图像。

如果我们更进一步，我们得到这个：

http://jsfiddle.net/fg7Ya/2/

简而言之：

.btn.client:before {
        background: url("http://www.klm.com/jobs/nl/images/icon_updateprofile_tcm701-313773.gif") no-repeat left center transparent;
}

.btn.poslovnica:before {
        background: url("http://www.dhl.nl/content/dam/General%20DHL%20pictures/Icons/Small%20teasers_50x50/dhl_open_account_icon_42x40.jpg") no-repeat left center transparent;
}

Answer 2

如果我找到了你，你想保持你的渐变并在你的按钮中有这些图标吗？如果是，请使用background-image作为图标。这将保持背景渐变：

Fiddle

.client{    
    background-image: url("../img/client.png") no-repeat left center transparent;
    background-size: 100% 100%;
}
.poslovnica{    
    background-image: url("../img/poslovnica.png") no-repeat left center transparent;
    background-size: 100% 100%;
}

此外，您应该从锚点中删除<p>标记。

Answer 3

你只需要你的background-size这将保留背景颜色。看看这个小提琴：

http://jsfiddle.net/C45ks/

.client{    
   background: url("http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg") 
no-repeat left center transparent;
**background-size: 20% 60%;**
}
.poslovnica{    
background: url("http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg")
no-repeat left center transparent;
**background-size: 20% 60%;**
}

带有多个图标的按钮

3 个答案: