css - 仅跨越子级的父级背景图像

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 background-attachment 属性

根据您的布局的构建方式，以下可能会起作用：

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>