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;

Answer 2

好的，我查看了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属性放在最后，因为如果它是第一个规则，则不会应用颜色。我不知道为什么会这样。

Answer 3

您的背景图片太大：它使用10％的背景图片..：Link JSFiddle

    background: #ff8844 url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") 10%

背景图像属性

3 个答案: