我正在尝试将背景图像设置在实际包含div的外部。
<div class="expandable">Show Details</div>
.expandable
{
background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}
因此，“展开”图像基本上应出现在 div 左侧。
我无法使其正常工作，当图像位于容器边界之外时，它不会显示。我不确定是否有 CSS 技巧我遗漏了，或者这与我的页面布局有关（“可展开” div 嵌套在其他几个 div 中）。
这种做法是否可行？ 有什么提示吗？
编辑：这是一个 jsFiddle，展示了问题：链接
我知道这是一个旧帖子，但我只是想更新一下并补充说，使用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
}
您需要将背景图像放在一个单独的元素内。背景图像位置不能将其放置在应用它们的元素之外。
编辑您的问题唤起了我的记忆，我去查看了CSS规范。实际上有一个"background-attachment" CSS属性，可以将背景锚定到视口而不是元素。然而，在IE浏览器中存在错误或无法正常工作，这就是为什么我将其放在了我的“不要使用”列表中的原因 :-)
编辑 - 请注意，此答案来自2010年，2016年存在更新且更广泛支持的CSS功能。
你不能按照你想要的方式来做这件事情，但是有一个相当简单的解决方案。你可以在.expandable内部再放置另一个
<div class="expandable">Show Details<div class="expandable-image"></div></div>
那么你的CSS将会是这样的：
.expandable{ position:relative; }
.expandable-image{
position:absolute; top:0px; left:-20px;
width:<width>px; height:<height>px;
background: url('./images/expand.gif') no-repeat;
}
.myclass .grid-view .items {
border-collapse: separate ;
}
.myclass .grid-view .filters td + td {
border-image-source: url("/path/to/my/img_32x32.png");
border-image-slice: 0 0 0 100%;
border-image-width: 0 0 0 32;
border-image-outset: 0 0 0 40px;
border-width: 1px;
}
.myclass .grid-view .filters input {
width: 80%;
}