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
}

Answer 2

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

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

编辑 - 请注意，此答案来自2010年，并且2016年存在更新（更重要的是，广泛支持的）CSS功能。

Answer 3

你不能按照你想要的方式做到这一点，但有一个非常直接的解决方案。您可以在.expandable内添加另一个div，如：

<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-* rules。例如，我有效地使用它们在yii中的CGridView小部件的过滤行中放置“虚拟搜索按钮”（单击过滤器输入框外的任何位置将触发ajax调用，但这些“按钮”为用户提供了直观的操作）。 ~~我不值得将CGridColumn小部件子类化为在其renderFilterCell（）方法中破解html~~ * - 我想要一个纯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是乘数而不是在边界中使用的单位的长度（不要放px） - 宽度（即1px）。结果是gridview的前n-1列中的假按钮。在我的情况下，我在最后一列中不需要任何东西，因为它是一个没有过滤器框的CButtonsColumn。无论如何，我希望这有助于人们寻找纯CSS解决方案?:-D

*写完这篇文章后不久，我发现我可以在用于构造CGridColumn的数组的'filter'属性中连接图像的代码，所以我的理由结果没有实际意义。此外，似乎存在一个问题（在Firefox中，无论如何），即使指定了空间，border-image-repeat也会被强制拉伸。不过，也许这对某人来说可能会派上用场?： - \

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

4 个答案: