14

私は、アプリが固定サイズで、デザインに基づいて要素を正確に配置する必要がある HTML/CSS/JS プロジェクトに取り組んでいます。ウィンドウ サイズが固定されているため、CSS でピクセル サイズを簡単に操作でき、ブラウザーのサイズ変更を気にする必要がありません。また、IE や Opera について心配しないという贅沢もあります。アプリは Webkit と Firefox でのみ動作する必要があります。

いくつかの場所で、特定のピクセル数にグラデーションの背景を適用する必要があります。これは、次のようなもので簡単に達成できます

background-image: linear-gradient(to top, #666666, #000000 60px);

(およびその-webkit-と-moz-対応するもの。) これは、ほとんどの要素でうまくいきます。ただし、カラーストップの上下のピクセル位置が必要な場所がいくつかあります。これらがパーセンテージポイントである場合、次のような方法で実行できます。

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);

(グレーから 60 ピクセル以上で黒、次に透明になり、最後の 10% で黒からグレー)。ただし、問題の要素のサイズは時間によって異なるため、ピクセルで同じことを達成する必要があります。必要に応じて、動的に計算されたさまざまなパーセンテージ ポイントで JS を使用してグラデーションを再適用する必要はありません。

それで、私の質問: 最後からカラーストップx ピクセル(パーセンテージではない)を指定する方法はありますか?

4

4 に答える 4

7

検索エンジン経由でこれを見つけたところですが、複数の背景画像background-sizeを使用して vals によって既に最良の解決策が与えられていると思いますが、使用する代わりに、ここでアルファ色background-positionを使用する方がはるかに柔軟で安定していると思います ( with )、のように以下の例:rgba()

background-image:
    /* top gradient - pixels fixed */
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),  
    /* background gradient - relative */
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ;

これにより、最初に探していた動作が正確に得られます。:)

デモ: http://codepen.io/Grilly86/pen/LVBxgQ

于 2015-07-17T09:04:11.820 に答える
1

これは可能ではないと思いますが、2 つのオブジェクト (1 つは下からの不透明なピクセル、もう 1 つは上からのピクセル) を重ね合わせると、JS の使用を避けることができます。

.background {
    position: absolute;
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
    position: relative;
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}
于 2013-03-15T15:10:35.400 に答える
1

po228 からの前の回答の行ですが、同じ要素の背景にあります。

2 つの異なるグラデーションを設定します。1 つは上から、もう 1 つは下から始まります。

.test {
  background: linear-gradient(to top, red 10px, white 10px),
      linear-gradient(to bottom, blue 10px, white 10px);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: bottom center, top center;
  height: 150px;
  width: 300px;
}
<div class="test"></div>

于 2015-05-24T15:17:25.837 に答える