web-dev-qa-db-ja.com

divの一部にのみ背景色を追加したい

Javaプラグインを使用して、左側にメニューを設定し、次に動的データを右側に設定します。メニュー項目をクリックすると、右側の対応するデータが上部にスクロールします。右側には長いリストがあり、メニュー項目をクリックすると、1つの（単一の）結果だけが表示されず、ページの一番上に表示され、残りはその下に表示されます。

したがって、私がやりたいことは、上部に色を設定して、それがあなたが要求した結果であることを注意を引くことです。私にとって最良のことは、クリックしたものを認識して背景色を設定することですが、それを行う方法がわかりません、またはJavaいいね.

Divは移動するものなので、CSS3でlinear-gradientを使用してページの上部のパーセンテージに色を設定しますが、divが上に移動するため、別のメニュー項目をクリックすると移動します。私はCSS3アニメーションを持っていますが、IEは残念ながらまだ存在しているので、ブラウザの互換性と古いブラウザのために何かが必要です。見つけたのはCSS3グラデーションだけです。グラデーションは必要ありません。別のdivを作成せずに色のブロックが必要です。前述したように、データは動的であり、そのdiv内で常に同じものではないためです。

私が探しているものであるパー​​センテージを設定することができますが、それは私が望んでいないフェードを持っているので、グラデーションは素晴らしいです、そしてCSS3ではない解決策があればそれが欲しいです。 CSS3でこれを行う方法があったとしても、グラデーションフェードを行わない限りお知らせください。それ以外の場合、そのセクションに注意を喚起する他の方法について気の利いたアイデアがあれば、私はすべてのアイデアを受け入れます。

css3htmlbackground-color
21
Rodney Maspoch

グラデーションは必ずしもフェードを持っているわけではありません、それは誤解です。divを70％の赤（実線）にして、上から始めて、CSSにしたいとしましょう。

background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)

2つの方法：

勾配あり：

div{    
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);
    background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
    background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)  
}

フィドル-> http://jsfiddle.net/QjqYt/

グラデーションなし

div{
    position:relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);  
}

div:before{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:70%;
    content:"";
    background-color:red;
}

フィドル-> http://jsfiddle.net/6cKZL/1/

44
Raj Nathani

Rodney- Colorzilla を使用して、独自のカスタムグラデーションを作成できます。オンラインツールであらゆる種類のグラデーションを作成でき、CSSコードが提供されます。また、IEと互換性があるようにするオプションもあります。

注：誰かがこの「コメントっぽい」と思う場合-私はそれを動かすことができます。

2
lloan

受け入れられた答えの更新として：

.only-start{
  background: linear-gradient(
    to right,
    red,
    red 1rem,
    transparent 1rem,
    transparent 100%
  );
}
0
mattinsalto