10

私はこのCSSを持っています：

#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}

そしてこのhtml：

<div id="wrapper1">
 <div id="wrapper2">
   <div id="wrapper3" class="clearfix" <!-- content here -->
        <p>blah blah blah</p>
   </div>
 </div>
</div>

2つの画像を追加する必要があります。中央の列の幅を変更せずに中央の列から左右に移動し、画像がページ全体の幅に影響を与えなかったことを確認します。例：

画像の例

画像を追加して、いくつかの試みをしました

  1. ブラウザの幅を変更しようとすると、背景画像が中央の列の下に表示されます画像

  2. 私は変更しようとしましたmin-width:1020px; to min-width:1665px;-一見、すべてが順調ですが、画面解像度については-1665px未満ですべてのコンテンツが右にシフトされますいくつかのオプションを試しましたが失敗しました

私の質問：ブラウザの幅を変更したときに、中央の列の左右の距離を短くするように画像を配置します（これは背景画像がない場合のデフォルトの動作です）

これが画像の例を含むコードです。

1020pxの空白の中央部分で1つの大きな画像を作成し、それに左/右の画像を入れた場合..それは機能しますか？

4

3 に答える 3

24

複数の解決策に従うことができます：

1）divを使用する：[良い]

divの適切な「フレームワーク」を作成すると、問題を解決できます。たとえば、次のようになります。

<div id="allWrapper">
 <div id="leftSidebar"></div>
 <div id="centerOrContent"></div>
 <div id="rightSidebar"></div>
</div>

そしてCSSの擬似コード（テストされていません）：

div#allWrapper{
 width: 100%;
 height: 100%;
}
div#leftSidebar{
 min-width: [theWidthOfLeftImage] px;
 height: 100%;
 background-image: url(leftImage.jpg);
 background-position: center right;
}
etc...

次に、CSS（フローティングとサイズ）で遊んで、ビューを調整できます。

2）複数の背景を使用する：[常に良いとは限らない]

このCSS擬似コードを使用して、複数の背景を使用できます（ここにあります：http ：//www.css3.info/preview/multiple-backgrounds/ ）

div#example1 {
width: 500px;
height: 250px;
background-image: url(oneBackground), url(anotherBackground);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

3）静的な「大きな」画像を使用する：[怠惰な解決策]

提案どおりに静止画像を使用する（中央に空白を付ける）ことでも問題を解決できますが、Webサイトが「レスポンシブ」である場合、画面解像度が異なる（またはブラウザウィンドウのサイズを変更する）グラフィックの問題が発生する可能性があります。この場合、中央の列の位置と幅も固定する必要があります（ウィンドウのサイズ変更時）。

4）レスポンシブデザインを使用する：[優れた-やる！]

中央の（コンテンツ）divでの画像の重複を避けるために、（このdivの）背景色を白に設定できます。

繰り返しになりますが、重複を避けるために、「特別な」レスポンシブCSSを設定できます。これは、ウィンドウの幅がX未満であるかどうかを検出し、2つの画像が消えます。たとえば、このCSS擬似コードでは次のようになります。

@media only screen and (min-width: 481px) {
//here happens something when the screen size is >= 481px
 div#example {
   background-image: url(oneBackground);
 }
}

@media only screen and (max-width: 481px) {
//here happens something when the screen size is <= 481px
 div#example {
   background-image: none;
 }
}

レスポンシブデザインに関するリンクは次のとおりです。

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-sensitive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

于 2013-02-25T14:00:40.230 に答える
3

2つの背景を持つ2つの絶対DIVを使用できます。1つは左中央に、もう1つは右中央に配置されます。

サイト内の好きな場所にDIVを配置します。（彼らは絶対に配置されています）

HTML：

<div class="background" id="background1"></div>
<div class="background" id="background2"></div>

CSS：

.background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#background1{
    background: url(yourImage1.jpg) no-repeat 100% 0;
}

#background2{
    background: url(yourImage2.jpg) no-repeat 0 0;
}
于 2013-02-25T13:56:12.330 に答える