跨越儿童的父母背景图像

Question

我希望#parent元素的背景图像仅显示在其子项上，而不显示其子项之间的间隙。必须在#parent.

的孩子之间看到身体的背景图像

HTML

    <div id='parent'>
        <div> TEXT </div>
        <div> TEXT </div>
        <div> TEXT </div>
    </div>

CSS

body{
   background-image: url('image1') repeat;
}

#parent{
    background-image: url('image2') repeat;  
}

#parent div{
    margin-top:50px;
    background:transparent;
}

注意：我不知道这是否可行。如果你能提出另一种方法来达到同样的效果，那也没关系。

感谢。

Answer 1

使用CSS后台附件属性

以下内容可能有效，具体取决于您的布局构建方式：

body{
   background-image: url('http://imgs.ir/imgs/201308/Patterns1-06.png');
}

#parent div{
    background: url('http://imgs.ir/imgs/201308/busytown_.PNG');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: inline-block;
    padding: 25px;
    margin-right: 11px;
    color: slategray;
}

有用的属性是background-attachment。

演示小提琴： http://jsfiddle.net/audetwebdesign/de8NZ/

参考： http://www.w3.org/TR/CSS2/colors.html#propdef-background-attachment

Answer 2

我刚刚做了一个Sven Bieder解决方案的小提琴：

http://jsfiddle.net/BcLAW/

CSS

body{
background-image: url('http://imgs.ir/imgs/201308/Patterns1-06.png');
}
#parent div{
background:url('http://imgs.ir/imgs/201308/busytown_.PNG');
display: inline-block;
padding: 25px;
margin-right: 11px;
color: slategray;
}
#parent div:nth-child(1) {
background-position: -26px -61px;
}
#parent div:nth-child(2) {
background-position: -117px -61px;
 }
parent div:nth-child(3) {
background-position: -208px -61px;
}

HTML

<div id='parent'>
    <div> TEXT </div>
    <div> TEXT </div>
    <div> TEXT </div>
</div>