将背景图像放在包含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:链接

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
}

Answer 2

您将不得不将背景图像放在单独的元素中.背景图像位置不能将图像放置在它们应用的元素之外.

编辑你的问题慢跑我的记忆,我去检查CSS规格.事实上,您可以设置"背景附件"CSS属性,它将背景锚定到视口而不是元素.然而,它在IE中有缺陷或破损,这就是为什么我把它放在我头上的"不要使用"架子上:-)

编辑 - 请注意,此答案来自2010年,并且2016年存在更新(并且更重要的是,广泛支持的)CSS功能.

Answer 3

你不能完全按照自己的意愿去做,但是有一个非常直接的解决方案.你可以把另一个div放在里面.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;
}

Answer 4

根据您的具体情况，您也许可以摆脱 CSS3 的border-image-* 规则。例如，我有效地使用它们在 yii 中的 CGridView 小部件的过滤器行中放置“虚拟搜索按钮”（单击过滤器输入框之外的任意位置将触发 ajax 调用，但这些“按钮”为用户提供了直观的操作）。 对我来说，仅仅为了破解 renderFilterCell() 方法中的 html 而对 CGridColumn 小部件进行子类化是不值得的*——我想要一个纯 CSS 解决方案。

  .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%;
  }

border-image-width 值涉及到一些技巧——32 是一个乘数，而不是border-width 中使用的单位的长度（不要输入 px）（即 1px）。结果是 gridview 的前 n-1 列中有假按钮。就我而言，我不需要最后一列中的任何内容，因为它是一个没有过滤器框的 CButtonsColumn。无论如何，我希望这可以帮助人们寻找纯 CSS 解决方案