Html 将背景图像放置在包含 div 的边框外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3548194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Place background image outside border of containing div
提问by fearofawhackplanet
I am trying to set a background image to be outside the actual containing div.
我正在尝试将背景图像设置为实际包含的 div 之外。
<div class="expandable">Show Details</div>
.expandable
{
background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}
so the "expand" image should basically appear just to the left of the div.
所以“展开”图像基本上应该出现在 div 的左侧。
I can't get this working, the image doesn't show when it's positioned outside the borders of the container. I'm not sure if there's a CSS trick I am missing, or if it's something to do with my page layout (the "expandable" div is nested inside several other divs).
我无法正常工作，当图像位于容器边界外时不显示。我不确定是否有我遗漏的 CSS 技巧，或者是否与我的页面布局有关（“可扩展”div 嵌套在其他几个 div 中）。
Is it possible to do this? Any hints?
是否有可能做到这一点？任何提示？
Edit: here is a jsFiddle showing the problem: link
编辑：这是一个显示问题的jsFiddle：链接
采纳答案by Pointy
You're going to have to put the background image inside a separate element. Background image positions cannot place the image outside the element they're applied to.
您将不得不将背景图像放在一个单独的元素中。背景图像位置不能将图像放置在它们所应用的元素之外。
edityour question jogged my memory and I went and checked the CSS specs. There is in fact a "background-attachment" CSS attribute you can set, which anchors the background to the viewport instead of the element. However, it's buggy or broken in IE, which is why I've got it sitting on the "do not use" shelf in my head :-)
编辑你的问题唤起了我的记忆，我去检查了 CSS 规范。实际上，您可以设置一个“背景附件”CSS 属性，它将背景锚定到视口而不是元素。但是，它在 IE 中有问题或损坏，这就是为什么我把它放在我脑海中的“请勿使用”架子上:-)
edit— Note that this answer is from 2010, and newer (and, more importantly, widely-supported) CSS capabilities exist in 2016.
编辑— 请注意，此答案来自 2010 年，2016 年存在更新（更重要的是，得到广泛支持）的 CSS 功能。
回答by Cypher909
I know this is an old thread but I just wanted update it and add that this is possible using CSS pseudo elements.
我知道这是一个旧线程，但我只是想更新它并补充说这可以使用 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
}
回答by Russell Leggett
You can't do this how you want to exactly, but there is a pretty straightforward solution. You can put another div inside of .expandablelike:
您不能完全按照自己的意愿执行此操作，但是有一个非常简单的解决方案。你可以把另一个 div 放在里面.expandable：
<div class="expandable">Show Details<div class="expandable-image"></div></div>
Then your CSS would look something like:
然后你的 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;
}
回答by Jeff
Depending on the details of your situation, you might be able to get away with CSS3's border-image-* rules. For instance, I used them effectively to place "dummy search buttons" in the filter row of a CGridView widget in yii (clicking anywhere outside the filter's input boxes will trigger the ajax call, but these "buttons" give the user something intuitive to do). It wasn't worth it to me to subclass the CGridColumn widget just to hack the html in its renderFilterCell() method* -- I wanted a pure CSS solution.
根据您的情况的详细信息，您可能能够摆脱 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%;
}
There is a little bit of a trick involved in the border-image-width values -- that 32 is a multiplier nota length (do not put px) of the unit used in border-width (ie 1px). The result is fake buttons in the first n-1 columns of the gridview. In my case, I didn't need anything in the last column because it is a CButtonsColumn which does not have a filter box. Anyway, I hope this helps people looking for a pure CSS solution
