1

我似乎无法让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;
}
4

3 回答 3

1

好的，我查看了https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds上的文档

新的 CSS

.btn {
    float: left;
    display: block;
    padding: 10px 30px;
    /* Notice that I list all the images */
    background: url("../img/border-top-left.png"), url("../img/border-top-right.png"),
                url("../img/border-bottom-left.png"), url("../img/border-bottom-right.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    background-color: #67b8de;
}

您会注意到我使用该background:属性，您也可以使用该background-image属性，感谢提示minitech。您还应该注意到，您不能只指定单个图像，而是要针对按钮的所有角。例子：

background-image: url("../img/border-blah-blah.png");
background-repeat: no-repeat;
background-position: top right;

这不会针对您的所有角落，但只会针对一个角落，这是因为级联会覆盖先前的规则，这就是为什么您必须一次输入所有图像的来源然后定位它们的原因。此外，您应该将background-color属性放在最后，因为如果它是第一条规则，则不会应用颜色。我不知道为什么会这样。

于 2013-10-14T13:55:39.827 回答
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;
于 2013-10-14T13:51:21.077 回答
0

您的背景图片太大：它正在使用 10% 的背景图片..：链接 JSFiddle

    background: #ff8844 url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") 10%
于 2013-10-14T13:58:05.443 回答