41

1 つの div に複数の背景色を使用するシナリオがあります。背景画像や追加の div を使用するよりも、私にとっては良いことです。しかし、CSS で簡単に使用する方法が見つかりません。それで、いくつかのシナリオについて助けが必要です。画像をご覧ください：

(1) 「A」を作りたい。そのために私は書いた：

div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }

しかし、そのコードを書いた後は、「B」のようになります。しかし、私は「A」のように正確に欲しいです。では、css/css3 によって、(さらに div を追加せずに) どうすればそれを行うことができますか?

(2) 一部を小さくすることはできますか？たとえば、「C」では、青色が他の部分よりも（高さが）小さくなっています。「C」のように1つの部分を小さくして（「C」に追加のdivを追加せずに）、1つのdivに複数の背景色を適用するにはどうすればよいですか?

更新: @Mohammad の回答の後、その方法で試しました。しかし、「C」のシナリオでは、青い部分の高さを下げることができません。どうすればいいのか教えてください。
jsfiddle.net/mFjQ6

4

8 に答える 8

63

A div は実際にはセレクターなしで作成でき:beforeます:afterが、最初の試行として線形グラデーションを使用します。唯一の違いは、4 つの位置を指定する必要があることです。次のように、0 から 50% までのダーク グレーと 50% から 100% までのライト グレー:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);

ご存知のように、B div は次のような 2 つの位置を持つ線形グラデーションから作成されます。

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

C div の場合、div A ike と同じ種類のグラデーションを使用します。

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);

しかし今回:afterは、div の 2 番目の部分が小さいかのように、白い背景のセレクターを使用しました。*以下により良い代替案を追加したことに注意してください。

完全なクロスブラウザー コードについては、このjsfiddleまたは以下のスニペットを確認してください。

div{
    position:relative;
    width:80%;
    height:100px;
    color:red;
    text-align:center;
    line-height:100px;
    margin-bottom:10px;
}

.a{
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}

.b{
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}

.c{    
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:50%;
    height:20%;
    background-color:white;
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

2 番目のセクションの a 部分を非表示にするために白い背景を使用しない C div の代替手段もあります。代わりに、2 番目の部分を透明にし、:afterセレクターを使用して、目的の位置とサイズの色付きの背景として機能させます。

この更新されたソリューションについては、このjsfiddleまたは以下のスニペットを参照してください。

div {
  position: relative;
  width: 80%;
  height: 100px;
  color: red;
  text-align: center;
  line-height: 100px;
  margin-bottom: 10px;
}

.a {
  background: #9c9e9f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* IE10+ */
  background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
  /* IE6-9 */
}

.b {
  background: #9c9e9f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* IE10+ */
  background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
  /* IE6-9 */
}

.c {
  background: #9c9e9f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1);
  /* IE6-9 */
}

.c:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 80%;
  background-color: #33ccff;
  z-index: -1
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

于 2013-09-29T21:02:21.707 に答える
5

background-color と border の両方を適用して、2 色のように見せることができます。

div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }

ボーダーは幅と同じサイズにする必要があります。

于 2013-09-29T18:03:03.193 に答える
1

すべてのブラウザと互換性があります。アプリケーションに合わせて値を変更してください

background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
于 2013-09-29T18:01:54.467 に答える
0

:after と :before を使用すると、それを行うことができます。

HTML:

<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>

CSS:

div {
    height: 100px;
    position: relative;
}
.a {
    background: #9C9E9F;
}
.b {
    background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
    content: '';
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    display: block;
    position: absolute;
}
.a:after {
    background: #f6f6f6;    
}
.c:before {
    background: #9c9e9f;
    left: 0;
}
.c:after {
    background: #33CCFF;
    right: 0;
    height: 80%;
}

そしてデモ。

于 2013-09-29T18:52:09.630 に答える