我希望#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;
}
注意:我不知道这是否可行。如果你能提出另一种方法来达到同样的效果,那也没关系。
感谢。
答案 0 :(得分:1)
以下内容可能有效,具体取决于您的布局构建方式:
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
答案 1 :(得分:0)
我刚刚做了一个Sven Bieder解决方案的小提琴:
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>