html - 具有边框背景图像的图像

我想要做的是围绕图像的边框。当我将类“ PayPalItem”放在其上时，在左下角的边框的右下角具有非重复背景。
所以，说这是

我希望它看起来像这样

这是我想要HTML外观和已设置的基本CSS的示例。

<a class="PayPalItem" href="#"><img src="../assets/test.jpg"></a>

.PayPalItem img {
    margin-bottom:26px;
    border: thin solid #FF9933;
    background-image: url(assets/addCart.png);
}

最佳答案

您可以这样操作，使您可以使用PayPal按钮共享链接的URL：

<a class="PayPalItem" href="#">
    <img src="http://placehold.it/200x200"/>
    <span class='paypal-button'>PayPal</span>
</a>

.PayPalItem {
    position: relative;
}
.PayPalItem img {
    margin-bottom: 0;
    border: thin solid #FF9933;
    background-image: url(assets/addCart.png); /* Is this meant to be the button? */
}
.PayPalItem .paypal-button {
    position: absolute;
    left: 0;
    bottom: -1.7em;
    border: 1px solid red;
    padding: 5px 15px;
    border-radius: 0 0 5px 5px;
}

http://jsfiddle.net/c5p5h/

关于html - 具有边框背景图像的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24987233/