2

我正在尝试使用&::before伪元素添加图像，并通过调整填充/边距将其放置在其父元素之上。我无法将 img 放在其父元素的“顶部”。它位于父级的框中。我尝试将这两个元素都设置为display:block. 我试图使用相对/绝对定位。我在没有解决方案的情况下调整了边距/填充。

HTML：

<div class="foo">
   <div class="title">title</div>
   <div class="body">text</div>
</div>

少/CSS：

.foo {
  display:block;
  padding: 1em;

  &:before {
    background-image: url("bar.svg");
    padding: .25in;  
    background-repeat: no-repeat;
    background-position: top left;
    background-position: top outside;
    background-color: white;
    content: "";
    display: block;
    max-width: (@column + .45in);    
    margin-left: -.15in;
    margin-top:-.5in;
  }
}

我希望调整伪元素的边距值会产生预期的结果。然而，这种情况并非如此。有我不知道的限制吗？

感谢您的时间和帮助。

4

2 回答 2

1

.foo首先，我假设“在顶部”是指在元素“之前”显示。我假设根据您正在尝试对代码执行的操作。通常，我会将“在顶部”解释为更高z-index且重叠的元素，但我认为这不是您要问的。

其次，除非我不熟悉某些东西（绝对可能），否则没有outside关键字 for background-position; 因此，这似乎是一个错误（尽管我不希望它会导致您面临的问题）。

第三，我认为您的基本前提应该是有效的。这个小提琴演示了将:before元素转移到其.fooparent的“之前” 。可能是您混合使用em单位和in单位导致了一些问题。这不是确保您获得所需定位的好方法。我会保留你的单位em。

于 2012-10-29T01:21:25.443 回答
0

默认情况下，伪元素内联显示。此外，它们被放置在元素的内容区域内。

要使其显示在该元素的“顶部”，请将显示设置为阻止。

最后，应该使用 content 属性初始化伪元素。

.foo::before { 
 content: url(./bar.svg);
 display: block;
}
于 2021-01-02T14:07:27.993 回答