html - 将背景图像放在包含 div 的边框之外

Question

我正在尝试将背景图像设置在实际包含的 div 之外。

<div class="expandable">Show Details</div>

.expandable
{
    background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}

所以“展开”图像基本上应该出现在 div 的左侧。

我无法正常工作，当图像位于容器边界之外时不显示。我不确定我是否遗漏了 CSS 技巧，或者它是否与我的页面布局有关(“可扩展”div 嵌套在其他几个 div 中)。

这有可能吗？有什么提示吗？

编辑:这是一个显示问题的 jsFiddle:link

Answer 1

我知道这是一个旧线程，但我只是想更新它并添加它可以使用 CSS 伪元素。

.class:before {
    content: "";
    display: inline-block;
    width: {width of background img};
    height: {height of background img};
    background-image: url("/path/to/img.png");
    background-repeat: no-repeat;
    position: relative;
    left: -5px; //adjust your positioning as necessary
}