与边界背景图象的图象

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按钮分享链接的网址：

<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/

Answer 2

我认为您最好的选择是使用paypal按钮在div中添加该链接。有点谎言：

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

如果您只想使用一个链接（避免使用上面的div选项），请确保在图像底部添加足够的填充，将背景设置为不重复并将位置设置为左下角。

Answer 3

那么你的背景总是在后台。注意前景。有几种方法可以解决这个问题....但我会使用：伪后选择器。这将阻止您在html中重复代码，这总是更好。

.PayPalItem {
   position:relative;
}

.PayPalItem img {
 border: thin solid #FF9933; 
}
.PayPalItem:after {
    content:" ";
    /* set your width and height to the dimensions of the add to cart image */
    width:10px;
    height:10px;
    display:block;
    position:absolute;
    top:100%;
    background-image: url(assets/addCart.png);
}

Answer 4

HTML：

    <a class="paypalcontrol" href="#">
    <img src="http://placehold.it/300x200"/>
    <div class='paypalicon'>PayPal</div>
</a>

CSS：

.paypalcontrol .paypalicon{
    position: absolute;
    left: 0;
    margin-top:-2px;
    bottom: -1.7em;
    border: 1px solid yellow;
    padding: 5px 15px;
    border-radius: 0 0 5px 5px;
}

    .paypalcontrol {
    position: relative;
}
.paypalcontrol img {
    margin-bottom: 0; 
    border: 1px solid yellow; 
    background-image: url();
}