带有边框背景图像的图像

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/

Answer 2

我认为您最好的选择是使用Paypal按钮在div内添加该链接。 有点像这样：

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

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

Answer 3

好吧，您的背景永远都是背景。 注意前景。 有几种方法可以解决这个问题....但是我会使用：after伪选择器。 这将防止您在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();
}