Question

我正在尝试让背景图像在div之外，并且无法弄清楚如何做到这一点（即使它是可能的）。我的HTML：

<div id="test"></div>

我的CSS：

#test {
    width: 50px;
    height:50px;
    background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue;
}

独立演示：

http://jsfiddle.net/568Zy/

该演示显示50x50 div内的图像。我希望的是背景图像从顶部开始是0px，从左边开始是50px。

有什么想法吗？

Answer 1

您的问题并没有明确说明您希望最终结果如何。

无法使背景图像“溢出”它的元素，但是您可以将背景图像应用于伪元素，并将其设置为您想要的任何大小，并将其放置在您想要的任何位置。

我在你的示例中使用了这种技术：http://jsfiddle.net/568Zy/11/

#test {
    background: blue;
    height:50px;
    position: relative;
    width: 50px;
}
#test:before {
    background: url("https://developers.google.com/_static/images/developers-logo.svg") repeat scroll 0 0 transparent;
    content: " ";
    display: block;
    height: 100px;
    position: absolute;
    width: 450px;
    z-index: -1;
}

如果这不是你想要的效果，请改写你的问题，并考虑制作一个模拟图像，显示你想要它的样子。

Answer 2

试试这个：http://jsfiddle.net/568Zy/16/。从本质上讲，您创建了两个<div>元素，并将其设置为绝对元素，其中一个z-index: 0;和另一个z-index: 1;。

<div id="test">zzz</div>
<div class="z-index"></div>

#test {
    background: blue;
    width: 50px;
    height:50px;
    position: relative;
    z-index: 1;
}

.z-index {
    position: absolute;
    background: url('https://developers.google.com/_static/images/developers-logo.svg');
    z-index: 0;
    width: 300px;
    height: 100px;
   top: 0px;
   left: 50px;
}

使背景图像在div之外

2 个答案: