Question

我有一个图像，我想用作我页面上链接到其他页面的按钮。我想以一种我可以使用小文本和大文本的方式来制作它。

相关图片：

enter image description here

我已经尝试了一些东西，但不能随便去。

a {
    background:url(http://i.imgur.com/8Isga60.png);
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    padding:30px 100px;
    height:20px;
    color:black;
    font-size:16px;

}

JS Fiddle

Answer 1

我建议你删除图像的想法...这个概念非常2005.使用今天的CSS，您可以使用纯CSS轻松地重新创建该图像，然后更加灵活。

如果你使用谷歌“CSS按钮生成器”，你会发现很多在线工具可以帮助你... http://www.cssbuttongenerator.com/

这是我在10秒内完成的一个例子，只是复制了他们提供的CSS ...授予它有点令人费解，但它确实有效：

<style type="text/css">
.classname {
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    text-indent:0;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #528ecc;
}
.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;
}.classname:active {
    position:relative;
    top:1px;
}</style>

Answer 2

您几乎可以在CSS3中执行此操作： JSFiddle Demo

.btn {

    margin:10px;
    color:white;
    font-size:16px;
    border:4px solid #c5c7c9;
    border-radius: 50px 50px;
    display:inline-block;

    /* Drop shadow */
    -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
    -moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.68);
    box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.68);

    /* Gradient Background */

    background: rgb(78,186,234); /* Old browsers */

    background: -moz-linear-gradient(left, rgba(78,186,234,1) 0%, rgba(0,121,183,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(78,186,234,1)), color-stop(100%,rgba(0,121,183,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ebaea', endColorstr='#0079b7',GradientType=1 ); /* IE6-9 */

}

    /* Button Sizes. */
    .btn.large {  padding:30px 60px; }
    .btn.small {   padding:10px 30px; }

HTML

<a href="#" class="btn large">my text here</a>      
<a href="#" class="btn small">my text here</a>
<a href="#" class="btn small">my text here long text goes here</a>

Answer 3

我认为您必须拆分图像，因为如果您尝试使用它作为完整图像重复它，它也将重复舍入部分。因此，左右两侧，以及中心的像素。请参阅此答案以供参考Button using three (3) background images css

旧学校版本类似于左右三个类，一个中心具有重复背景。Create button using 3 images

现在，正如评论中所提到的，除非您完全决定使用背景图像部分，否则纯CSS解决方案可能会更好。

Answer 4

试试这个：

a{
    background:url(http://i.imgur.com/8Isga60.png) no-repeat center;
    ...
}

然而它也会移动按钮。 jsfiddle

你应该真正研究CSS按钮而不是使用图像。试试CSS Button Generator

Answer 5

问题在于左边和右边。右边填充，为什么不将链接和文本分开，以便容易使内容居中？

（编辑：jsfiddle）

<p><a class="sol" href="http://imgur.com/8Isga60"><span>Does not work with larger text</span></a></p>

a.sol {
        background:url(http://i.imgur.com/8Isga60.png);
        display:inline-block;
        padding:30px 0px;
        width: 243px;
        height:20px;
        color:white;
        font-size:16px;
        text-align: center;
    }

如何创建带图像的按钮？

5 个答案: