html - 带边框背景图像的图像

Question

我想要的是制作一个环绕图像的边框。当我将类“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);
}

Answer 1

您可以这样做，这样您就可以通过 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/