3

私は、他の誰かによって設計されたクライアント用のサイトを作成しています。サイト自体は比較的シンプルですが、特定の 1 つのことに頭を悩ませているようには見えません。次のスクリーンショットを見てください。

http://cl.ly/image/0M090g150S28

サイズ変更時にこれらの 2 つの緑色の背景 (上部と下部) をコンテンツ (960px - マージン 0 自動) に揃えて配置したい場合、html/css 構造をどのように作成しますか? 、たとえば、3000px?

終わりのない背景は簡単です。中央の div の連絡先に固定された背景は簡単です。

しかし、2つが組み合わさった？ここで私を助けてください、私はしばらくの間これについて頭を悩ませてきました。それはおそらく非常に単純です..?!

乾杯！

4

3 に答える 3

0

これが実際の例です：http：//digitaldemo.net/stack-test.html

CSSは次のとおりです。

htmo, body  { width:100% ;
height:100% ;
}

body    { background:#ececeb ;
margin:0 ;
padding:30px 0 ;
position:relative ;
font-family:arial,helvetica,sans-serif ;
font-size:16px ;
}

.top-left   { disply:block ;
width:395px ;
height:250px ;
background:url("top-left.png") no-repeat ;
position:absolute ;
top:0 ;
left:0 ;
z-index:-1 ;
}

.bottom-right { display:block ;
width:395px ;
height:250px ;
background:url("bottom-right.png") no-repeat ;
position:absolute ;
bottom:0 ;
right:0 ;
z-index:-1 ;
}

#container  { width:1000px ;
margin:auto ;
margin-bottom:20px !important ;
padding:20px ;
position:relative ;
top:0px ;
background:#ffffff ;
border:1px solid black ;
z-index:99999px ;
overflow:hidden ;
}

およびHTML：

<div id="container">

(your main layout and content go here)

</div>

<div class="top-left"></div> // this is the top left teal corner

<div class="bottom-right"></div> // this is the bottom right teal corner

お役に立てれば！

于 2012-08-18T14:13:55.380 に答える
0

コンテンツで 2 つの巨大な疑似要素を使用overflow: hiddenし、それらに背景を設定して本文で使用するのはどうですか。

デモ

HTML:

<section class="main"></section>

CSS:

html, body, .main { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
}
.main {
    width: 490px;
    margin: 0 auto;
    position: relative;
    background: rgba(192, 186, 176, .7);
}
.main:before, .main:after {
    width: 1500px;
    height: 1000px;
    position: absolute;
    content: '';
}
.main:before {
    right: 60%;
    top: 0;
    background: linear-gradient(-30deg, transparent 54%, teal 54%);
    background-repeat: no-repeat;
}
.main:after {
    left: 60%;
    bottom: 0;
    background: linear-gradient(-30deg, teal 46%, transparent 46%);
    background-repeat: no-repeat;
}

私は IE9 と IE8 では機能しない CSS グラデーションを使用しましたが、単純にイメージを使用することができます。

EDIT：別のアイデアがありました.グラデーションの代わりに境界線を使用するだけで、IE9とIE8で機能します。疑似要素の CSS を置き換えるだけです。

デモ

.main:before, .main:after {
    border: solid 500px teal;
    border-width: 500px 750px;
    position: absolute;
    content: '';
}
.main:before {
    right: 60%;
    top: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    background-repeat: no-repeat;
}
.main:after {
    left: 60%;
    bottom: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    background-repeat: no-repeat;
}
于 2012-08-18T14:46:35.463 に答える
0

これについてはよくわかりませんが、yahoo スタイルシートで見たことがあるかもしれません。上と下の画像を作成します。次に、背景の位置を指定して上部の html タグの CSS ルールの背景画像を定義し、今度は同じ背景の位置を指定して下部の画像にも同じことを行い、それを body タグに添付します。それがうまくいくことを願っています

于 2012-08-18T13:44:34.510 に答える