0

私はこのことに一生懸命取り組んでいますが、CSS を使用してこれを作成する方法がわかりません。

基本的に、このウェブサイトでは、下の画像でわかるように、メインコンテンツの背景の外に出る画像を追加しようとしています。「最新のレッスン」と書かれている場所 (タイプミスで申し訳ありません) または、ニュースレターを受け取ると書かれている場所。

クラブを持っている人はいますか？道に迷いました！

ここにいくつかのコードがあります：

.main-content {
    position:relative;
    z-index:100;
    padding:1em 0 8.5em 0;
    background:#fff;
}

.main-content p {
    color:#555;
}

.site-wrap {
    position:relative;
    min-height:100%;
}

ここに画像の説明を入力

4

2 に答える 2

0

おそらく探しているのは、要素を正しく配置することです。これは、必要に応じて相対位置または絶対位置のいずれかになります。いずれの場合も、PARENT コンテナーが配置された要素であることを確認してください (この例では、相対)

このフィドルを参照してください: http://jsfiddle.net/callseng/UUxqG/

クラス 'move-left' の段落は main-content 要素内に格納され、相対的に配置されてから 25px だけ左に押し出されます。

position:relative;
left: -25px;
于 2013-04-28T16:27:27.363 に答える
0

私がお勧めするのは、バックグラウンドで次のような div を作成することです。

HTML:

<div id="backgrounddiv">
</div>

したがって、HTML は非常に簡単です。これらの div には何も入れないでください。CSSの場合：

CSS:

    #backgrounddiv {
length:100%; //spans length of page
width:100%;  //spans width of page
z-index:1;   //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}
于 2013-04-28T16:22:43.270 に答える