html - 背景图片属性

Question

我似乎无法使 background-image 属性起作用。我正在尝试将图像添加到我的按钮的边框，但它不起作用。这是 http://jsfiddle.net/Bchga/ .

HTML

<a href="#" class="btn">Image Borders</a>

CSS

a {
    text-decoration: none;
    color: #fff;
}

.btn {
    float: left;
    display: block;
    padding: 10px 30px;
    background-color: #67b8de;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") no-repeat right bottom;
}

Answer 1

您的 background-image 规则还包含 background-repeat 和 background-position 的值。将它们分开(或者您也可以将颜色放入其中并使用 background 速记):

background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png");
background-repeat: no-repeat;
background-position: right bottom;