web-dev-qa-db-ja.com

divを2色で塗りつぶしますか？

幅500pxのdivが与えられた場合、CSSを使用して背景を2つの異なる色で塗りつぶす方法はありますか？私はそれが背景画像で実行できることを知っていますが、それがbg colorで実行できるかどうか疑問に思っています。例： enter image description here

htmlcss
17
raklos

複数の背景色を設定することはできませんが、次のように設定できます。

div.twocolorish {
    background-color: green;
    border-left: 20px solid red;
}

赤い部分にテキストを移動する必要がない限り、1つのdivでこれを処理できます。

23
Andrew

疑似要素：beforeを使用して、1 divで2色を実現できます。

HTML：

<div class="twocolordiv"></div>

CSS：

.twocolordiv  {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}

.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}
12
Mary Am

私は線形勾配を使用してこの解決策に終わりました：

    .dualcol-test {
        background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
    }
   <div class="dualcol-test"> This div has a green and red background <br><br><br> </div>
7
A. Markóczy

：before css属性を使用すると、divを2つの色で「塗りつぶす」ことができます。

.myDiv {
  position: relative;  /*Parent MUST be relative*/
  z-index: 9;
  background: green;
  
  /*Set width/height of the div in 'parent'*/
  width: 100px;
  height: 100px;
}
.myDiv:before {
  content: "";
  position: absolute; /*set 'child' to be absolute*/
  z-index: -1;  /*Make this lower so text appears in front*/
  
  
  
  /*You can choose to align it left, right, top or bottom here*/
  top: 0;
  right: 0;
  bottom: 60%;
  left: 0;
  background: red;
}
<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>

簡単に編集されたサンプルを見ることができます LIVE DEMO

3
jbutler483

この質問では、CSS3がこの問題にどのように取り組むかについて考えさせられました。率直に言って、仕様が混乱しています。とはいえ、亀裂を通り抜けるいくつかの機能：背景サイズと線形グラデーション。

<style type="text/css">
    #ji { width: 500px; height: 300px;  
        background: 
        -moz-linear-gradient(green, green) 0px 0px no-repeat,
        -moz-linear-gradient(red, red) 200px 50px no-repeat,
        -moz-linear-gradient(blue, blue) 0px 250px no-repeat,
        -moz-linear-gradient(gray, gray) 300px 125px no-repeat;

        -moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
    }
</style>
<div id="ji">

</div>

これを試してみてください:)

この問題へのより良いアプローチがあると私は確信していますが、CSSの背景を使用すると、柔軟性が高まることを示しています（1日）。

編集：線形グラデーションと背景サイズに対応するWebkitの同等機能がありますが、これはFirefoxでのみ機能することを忘れていました

3
dianovich

いいえ、設定できる背景色は1つだけです。ただし、コンテナを2つに分割して、それぞれに異なる背景色を設定することもできます。

3
user479911

遅くなったほうがいい。これが役立つかもしれないと思った：

HTML

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

あなたはこれを見ることができます http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

2
gutierrezalex

background-image/repeat-yを使用するのが最も簡単なソリューションですが、JavaScriptで色や幅などを変更したい場合があります。

これは、どこでもテキストを許可する方法です。

http://jsfiddle.net/WQ8CG/

HTML：

<div id="container"><div class="offset">text</div></div>

CSS：

#container {
    background: #ccc;
    border-right: 40px solid #aaa
}
.offset {
    margin-right: -40px;
    zoom: 1; /* to fix IE7 and IE6 */
    position: relative /* to fix IE6 */
}
2
thirtydot

ボックスの影をはめ込み、影を必要な色に変更できます。

[〜＃〜] css [〜＃〜]

-moz-box-shadow:    inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow:         inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
0
AlexBMAS