0

背景を機能させるにはこの問題があります... 3 つの部分の画像が必要です.. (上、中央、下)

私はそれを近くに持っています..私は何か簡単なものを見逃していると確信しています...このjsfiddleをチェックして、ダイヤルインできるかどうかを確認してください!

http://jsfiddle.net/bb6hZ/

ありがとう！！

私が持っているもの：

<article>
<div class="bg1">
    <div class="bg2">
        <h2>post name title here yo</h2>
        <span class="meta">September 10, 2012</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</article>

これを試して達成するために、2 つの追加の bg div を使用しています... 画像ファイルは既に作成しています。

過去に何度もこれを行ったことがありますが、正確な方法を思い出せません...この方法を何年も使用する必要はありませんでした。

助けていただければ幸いです!!! ありがとう！

4

2 に答える 2

0

とった！

秘訣は、すべての要素をフロートさせることです...jsfiddleを参照してください。

http://jsfiddle.net/bb6hZ/2/

article,.bg1,.bg2 {background:url("http://www.pacificcheese.com/img/int/bg_article.png") -556px 0 no-repeat; float:left;}
article {display:block; width:556px; background-position:0 0; padding-top:130px;}
.bg1 {background-repeat:repeat-y;}
.bg2 {background-position:-1112px 100%; margin:-130px 0; padding:30px 20px 45px;}
于 2012-11-15T05:27:33.050 に答える
0

これを試して：

.bg1 {background-repeat:repeat-y; border:transparent 1px solid; }
于 2012-11-15T10:52:33.260 に答える