web-dev-qa-db-ja.com

CSS：ウィンドウの幅の50％の背景色を設定する

「2つに分割」されているページの背景を達成しようとしています。反対側に2色（bodyタグにデフォルトのbackground-colorを設定し、次にウィンドウの幅全体に広がるdivに別の色を適用することによって行われているようです）。

私は解決策を思い付きましたが、残念ながらbackground-sizeプロパティはIE7/8では動作しません。これはこのプロジェクトには必須です - 

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

単色なので、通常のbackground-colorプロパティのみを使用する方法があるでしょうか。

cssbackground-color
115
Staffan Estberg

古いブラウザのサポート

古いブラウザのサポートが必須で、複数の背景やグラデーションを使用することができない場合は、おそらくdivの予備の要素に対して次のようなことをしたいと思うでしょう。

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

例： http://jsfiddle.net/PLfLW/1704/

解決策は、画面の半分を占める特別な固定divを使用します。固定されているので、ユーザーがスクロールしても元の位置に残ります。他の要素がバックグラウンドのdivより上にあることを確認するために、後でいくつかのzインデックスをいじる必要があるかもしれませんが、複雑すぎてはいけません。

問題がある場合は、コンテンツの残りの部分にbackground要素よりも高いz-indexがあることを確認してください。

現代のブラウザ

新しいブラウザがあなたの唯一の関心事であるならば、あなたが使うことができる他の2つの方法があります：

線形グラデーション：

これは間違いなく最も簡単な解決策です。あなたは様々な効果のためにボディのbackgroundプロパティで線形グラデーションを使うことができます。

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

これにより、各色で50％のカットオフが強いので、名前が示すように「グラデーション」は発生しません。達成できるさまざまな効果を確認するには、スタイルの「50％」の部分を試してみてください。

例： http://jsfiddle.net/v14m59pq/2/

background-sizeを持つ複数の背景：

背景色をhtml要素に適用し、次にbackground-imageをbody要素に適用し、background-sizeプロパティを使用してページ幅の50％に設定することができます。これは同様の効果をもたらしますが、実際には1つか2つの画像を使用している場合はグラデーションでのみ使用されます。

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

例： http://jsfiddle.net/6vhshyxg/2/

補足：後者の例では、html要素とbody要素の両方がheight: 100%に設定されていることに注意してください。これは、コンテンツがページより小さい場合でも、背景が少なくともユーザーのビューポートの高さになるようにするためです。明示的な高さがなければ、背景効果はあなたのページコンテンツまでしか及ばないでしょう。それはまた一般的にちょうど良い習慣です。

227
justisb

「2分割」の背景を達成するための簡単な解決策：

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

方向として度を使用することもできます

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
42
juniperi

2番目の色を0％にすると、線形グラデーションの代わりに難しい区別ができます。

例えば、

グラデーション - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

難しい区別 - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

15
akash

これは純粋なCSSで動作するはずです。

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

chromeでのみテストされています。

12
Michael

だから、これは非常に古くからある質問で、すでに受け入れられた答えがありますが、この答えは4年前に投稿されていれば選択されたはずだと思います。

私はこれを純粋にCSSで解決し、そして余分なDOM要素はありませんでした！つまり、2つの色は純粋に1つの要素の背景色であり、2つの背景色ではありません。

私はグラデーションを使用しました、そして、私は色を非常に密接にセットしたので、それは色がはっきりしていて、それらが混ざらないように見えます。

これがネイティブ構文の勾配です。

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

色#74ABDDは0%で始まり、まだ#74ABDDでは49.9%です。

次に、要素の高さの0.2%内で次の色にグラデーションを移動させ、2色の間に非常に実線のように見えるものを作成します。

これが結果です。

Split Background Color

そしてこれが私のJSFiddleです！

楽しむ！

12
WebWanderer

IE8 +をサポートしなければならなかった過去のプロジェクトで、私はdata-urlフォーマットでエンコードされた画像を使ってこれを達成しました。

画像は2800x1px、画像の半分は白、そして半分は透明でした。かなりうまくいった。

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

あなたはそれがここで働いているのを見ることができます JsFiddle 。それが誰かに役立つことを願っています;）

9
Putuko

私は:afterを使用しました、そしてそれはすべての主要なブラウザで働いています。リンクを確認してください。あとは絶対位置になるので、zインデックスに注意する必要があります。

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

フィドルリンク

4
user1162084

あなたのイメージbgに使用

縦分割

background-size: 50% 100%

水平分割

background-size: 100% 50%

例

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}
3
Jan Ranostaj

あなたの問題を実装してdivの中に一行だけを入力する方法の一つ：

background-image: linear-gradient(90deg, black 50%, blue 50%);

デモコードとその他のオプション（水平、斜めなど）があります。[コードスニペットの実行]をクリックすると、実際の動作を確認できます。

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}
Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>
2
Nadav

これを達成するために:after疑似セレクターを使用することができますが、私はそのセレクターの後方互換性について確信がありません。

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

これを使って、ページの背景に2つの異なるグラデーションを付けました。

2
Awaterujin

最も安全で意味的に正しいオプションは、固定位置の擬似要素（:afterまたは:before）を使用することです。このテクニックを使うことはz-indexをコンテナ内の要素に設定することを忘れないでください。また、疑似要素用のcontent:""ルールが必要であることを忘れないでください。そうしなければレンダリングされません。

#container {...}

#content:before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

実例： https://jsfiddle.net/xraymutation/pwz7t6we/16/

2
Arkadiusz Lendzian

これはほとんどのブラウザで動作する例です。
基本的に2つの背景色を使います。最初の色は0％から始まり50％で終わり、2番目の色は51％から始まり100％までです。

私は水平方向を使っています：

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

さまざまな調整のためにあなたが使うことができる http://www.colorzilla.com/gradient-editor/

0
Sorin Haidau