带边框背景图片的图片答案

【问题标题】：Image with border background image带边框背景图片的图片
【发布时间】：2014-07-28 10:13:07
【问题描述】：

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

【问题讨论】：

标签： html css image background border

【解决方案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/

【讨论】：

【解决方案2】：

我认为最好的办法是在带有 paypal 按钮的 div 中添加该链接。有点像这样：

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

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

【讨论】：

我不知道为什么，但有人告诉我这件事让我很受打击。不过，底部边框会低于背景图片。

【解决方案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);
}

【讨论】：

【解决方案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();
}

【讨论】：