2

#parent要素の背景画像を子にのみ表示し、子の間のギャップには表示したくありません。body の背景画像は、 の子の間に表示される必要があります。#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;
}

注：これが可能かどうかはわかりません。同じ効果を達成する別の方法を提案できれば、それも問題ありません。

ありがとう。

4

2 に答える 2

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

于 2013-08-02T12:50:53.417 に答える
0

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>
于 2013-08-02T13:04:28.963 に答える