Question

我想在边框的最右边区域创建一个带有图像的标题（h2）。我的布局几乎是正确的，除了我不能将图像稍微推到元素边界框的右边 - 我如何调整我的CSS以便正确显示？

我正在尝试做这样的事情：

[{someHeadLineText}{dynamic space            }{image}{5px space}]

其中[]表示我的内容的总可用宽度。

HTML：

<div class="primaryHeader">             
  <h2>News</h2>             
</div>

的CSS：

.primaryHeader h2 {
   background-color: green; /* the header looks like a box */
   color: black;    
   background: transparent url(../images/edit.png) no-repeat right center;
   border: 1px solid red;
}

我将图像放在我的h2元素的右侧并垂直居中 - 但是如何调整背景图像的位置？

Answer 1

我担心我认为你做不到。您可以使用right或像素值作为图像的x位置，但该像素值始终相对于边界框的 left 角。添加填充也无济于事，它只会进一步扩展边界框。

我知道的唯一解决方案是将移位添加到图像本身，或者使用位于元素后面的绝对定位元素（略微偏移） - 但这需要事先知道宽度和高度。

编辑：邪恶，黑客的想法。我现在没有时间尝试这个，但如果h2是display：block，它应该可以工作。

授予h2一个position: relative。

使用以下内容在div内放置h2或其他元素：

position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1;  /* I don't know whether this will overwrite the h2's content */

这可能会产生预期的效果，我不确定，因为我没有尝试过。该元素可能会覆盖h2的其他内容，在这种情况下，您必须将其余内容放入<span>和position: relative的{{1}}元素中。

这真是太烂了。最好将填充物放入图像本身，更清洁。

Answer 2

您可以抛弃背景图片并改为使用图片。

<div class="primaryHeader" style="padding-right: 5px;">  
  <img src="../images/edit.png" alt="" style="float: right;" />           
  <h2>News</h2>             
</div>

Answer 3

你可以在图像中添加填充像素吗？

Answer 4

您可以查看CSS3 background positioning。它适用于所有现代浏览器（当然不是IE浏览器）。

在h2标记中放置带填充的背景图像

4 个答案: