-1

我正在尝试使背景图像位于 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 内的图像。我希望背景图像从顶部开始 0 像素，从左侧开始 50 像素。

有任何想法吗？

4

2 回答 2

3

您的问题并没有明确说明您希望最终结果是什么样子。

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

我在你的例子中使用了这种技术：http: //jsfiddle.net/ybw750jd/

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

如果这不是您想要的效果，请重新表述您的问题并考虑制作一个模型图像来显示您想要的外观。

于 2013-07-02T15:16:50.240 回答
1

试试这个：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;
}
于 2013-07-02T15:18:43.900 回答