如何使用CSS定位此图像，使其与div重叠但显示内联？

Question

我有一张图像，我试图用捐赠按钮内联显示，但我希望它与它所包含的div重叠。

目前，图片不会显示;它所包围的盒子有：display in table：

当我阻止显示时：在Firebug中内嵌，图像显示，但在捐赠按钮上方。

我正在使用的代码（基于建议和使用W3学校）是：

<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09
/feature-me.png') no-repeat 50% 50%; background-position: center center; background-
attachment: absolute!important; width: 133px; height: 116px; display:inline; 
overflow:visible;"></div>

<a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal
/index.php" class="spt_newpay_button buttondesign28">Donate!</a>

这是我在Photoshop中模拟的效果，我正在尝试实现：

头像和箭头只是一个名为“feature-me.png”的图像。但我只是不确定如何完成我想要的。除了按钮的不同颜色选项之外，spt_newpay_button类中没有任何内容。

我真的希望这可以在不使用jquery的情况下实现，只使用CSS。

非常感谢任何指导！

谢谢！

Answer 1

直接在您的页面中尝试这段代码：

<div alt="outer image" style="position:relative;width=741px;height:92px;border:0px;
background: url('http://web-asylum.com/help-images/_tmp1.jpg') no-repeat;">

  <a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php" 
style="position:absolute;left:590px;width=138px;height:65px;border:0px;margin:10px 5px;">

  <img src="http://web-asylum.com/help-images/_tmp2.jpg" alt="right button"></a>
  <img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" alt="Cartoon"
style="position:absolute;left:450px;width: 133px; height: 116px;border:0px;margin:5px 5px;">

</div>

您的原始代码未明确说明按钮的制作方式，或横幅文字是背景文本还是实际文本的一部分。您还可以在示例代码中引用CLASS，但不详细说明。

我在我的某个域上托管了两个临时图像（外框和按钮），这样您就可以看到它正常工作，必要时将它们替换为您自己的代码。

所以我创建了上面的代码，主要是使用3x单独的图像和元素样式，只是为了向您展示一种实现所需内容的简洁方法。

只需删除您希望使用文字和纯风格等重新创建的任何图像。

您将看到它只使用具有POSITION：Relative样式的1 DIV图层 - 这会将图层设置为相对于页面上的任何其他图层。两个内部元素是图像元素[其中一个在HREF链接中包围，以提供按钮操作。]

这两个元素都使用样式POSITION：Absolute，它固定在位置x = 0的外部DIV的开头。然后它只是设置LEFT样式值以将两个img元素移动到其父DIV右侧的情况。

这两个IMG元素将与父级保持一致，父级将放置在主页中。

还有其他方法可以实现相同的目标，但没有关于您的页面的额外信息 - 这很好。

Answer 2

如果没有创建另一个<div>的麻烦，您可以轻松实现您想要实现的目标。目前，这是在您的网站中生成Donate按钮和feature-me图片的代码：

<div class="su-column-inner su-clearfix">

<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div>

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

您需要从上面的代码中删除以下代码：<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div>并将其替换为以下代码：<img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">。最终代码如下所示：

<div class="su-column-inner su-clearfix">

<img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

接下来，您必须将这些样式添加到样式表的底部：

img#sideimage {
     position: absolute;
     margin-left: -97px;
     margin-top: 32px;
     width: 98px;
}

您可以根据自己的喜好调整分配给margin-left CSS的margin-top，width和img#sideimage属性。希望这能解决您所面临的问题。