web-dev-qa-db-ja.com

特定の高さで停止し、単色でさらに続くHTML / CSSグラデーション

HTML/CSSに勾配を持たせたい。

一部のDIVの高さは常に400pxを超えると仮定します。グラデーションを追加して、上部が＃FFFFFF、300ピクセルが#EEEEEEになるようにします。したがって、最初の300px（高さ方向）は、ニースの「白から灰色」のグラデーションです。 300ピクセル以降、DIVの高さに関係なく、背景色を#EEEEEEのままにします。

これは勾配停止と関係があると思います（？）

どうすればできますか？

追伸IEでそれが可能でない場合、私は気にしません。geckoとwebkitブラウザーがこれを適切に表示するなら大丈夫です。

htmlcssgradient
30
user529141
height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

高さの割合である0.75で遊ぶ必要があるかもしれませんが、それでうまくいくはずです。

10
TNC
background-color: #eee;
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */

これは、現在のMozillaドキュメント： https://developer.mozilla.org/en/CSS/-moz-linear-gradient に基づいています。

Firefox 3.6およびChrome 15で動作することを確認しました。

30
ReganY

別の方法

background-color: #eee;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);

background-repeat:no-repeat;
background-size:100% 300px;
11
seanjacob

まず、グラデーションで2つ以上のカラーストップを使用できることを知っておくのは良いことですが、座標として固定ピクセルを使用することはできません。パーセンテージでなければなりません。

あなたの場合、最初のカラーストップを0％で、2番目のカラーストップを50％程度で定義するだけです。実装はブラウザに依存するため、 gradient generator を使用することをお勧めします。

思いついた

background: #FFFFFF; /* old browsers*/ 
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */
4
Baztoune
background: -moz-linear-gradient(top,  #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);

これは私のために働く

3
Vicky Biswas

あなたがすることができます：

<div id="bgGen"></div>

それから

#bgGen{
   height: 400px;    
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
   margin-bottom:-400px;
}

それはちょっと不正行為ですが、それは動作します...

2
Addo Solutions

今も同じことがありました。メインコンテンツdivに、ページごとに高さが大幅に異なるグラデーションを配置したかったのです。

私はこれで終わりました、そしてそれは素晴らしく動作します（そして余分なコードはあまり多くありません）。

CSS：

.main-container {
  position: relative;
  width: 100%;
}
.gradient-container {
  /* gradient code from 0% to 100% -- from colorzilla.com */
  height: 115px; /* sets the height of my gradient in pixels */
  position: absolute; /* so that it doesn't ruin the flow of content */
  width: 100%;
}
.content-container {
  position: relative;
  width: 100%;
}

HTML：

<div class="main-container">
  <div class="gradient-container"></div> <!-- the only thing added for gradient -->
  <div class="content-container">
    <!-- the rest of my page content goes here -->
  </div>
</div>

colorzillaのgradient-editor を使用してCSSを生成することを強くお勧めします。クロスブラウザの最適化が非常に簡単になります（特にPhotoshopやFireworksに慣れている場合）。

2
Scrimothy

この問題の最も簡単な解決策は、単純に複数の背景を使用し、背景のグラデーション部分にパーセンテージまたはピクセルで定義されたサイズを与えることです。

body {
  background: linear-gradient(to right, green 0%, blue 100%), green;
  background-size: 100px 100%, 100%;
  background-repeat: no-repeat;
  background-position: right;
}

html,
body {
  height: 100%;
  margin: 0;
}

必要に応じて、ブラウザのプレフィックスと組み合わせて一致させます。

2
Nit

これは私のために働いた

    background: rgb(238, 239, 240) rgb(192, 193, 194) 400px; 
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;

また、グラデーション画像を作成し、それを背景として設定するだけではいけない理由を誰かがコメントしました。モバイルデザインと訪問者のデータ使用量が制限されているため、私もほとんどCSSを使用することを好みます。できるだけ多くの画像を制限してください。それを行うよりもCSSで行うことができる場合

0
user3438298