CSSグラデーションの見た目を滑らかにするには？

私は、黒の背景を持っており、透明から0.7白にシンプルなCSSグラデーションと内側のブロックを追加したい：CSSグラデーションの見た目を滑らかにするには？

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76) 
)

しかし、これは悪いになります。私が見つけ

唯一の方法追加のカラーストップを手動で追加することです。

background: linear-gradient(
    to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.05) 2%, 
    hsla(0, 0%, 100%, 0.09) 3%, 
    hsla(0, 0%, 100%, 0.2) 5%, 
    hsla(0, 0%, 100%, 0.57) 11.5%, 
    hsla(0, 0%, 100%, 0.69) 14%, 
    hsla(0, 0%, 100%, 0.75) 16.5%, 
    hsla(0, 0%, 100%, 0.76) 17.5%, 
    hsla(0, 0%, 100%, 0.77) 
);

そして、それははるかに良く見える：

The comparsion demonstration on CodePen

カラーストップのCSSグラデーションを滑らかにする簡単な方法はありますか？

出典

2016-12-28 Даниил Пронин

あなたはこの記事をチェックすることができます。http://stackoverflow.com/questions/13151331/smooth-css-gradients –

私はすでに自分の質問を作成する前に、それを読んだことがあります。その質問には解決策はありません。選んだ答えは、0と100％を除いてカラーストップを使わないことを示唆しています。回避策ではなく、この問題を解決したい。 –

私は恐れはありませんが、これらの例の基本的な設定を使用することができます。http://codepen.io/taylorvowell/pen/BkxbC – Roberrrt

ある日、私は願って、私たちはこの持っている：https://github.com/larsenwork/postcss-easing-gradients

：2つのオプションで

PostCSSプラグイン：今の
```
linear-gradient(
    to top, 
    hsla(330, 100%, 45%, 0), 
    cubic-bezier(0.45, 0, 0.5, 0.5), 
    hsla(330, 100%, 45%, 1) 
); 
```
ボットを、我々はこれを持っていますアプリイージング関数を選択することができallowng：https://larsenwork.com/easing-gradients/

出典

2018-02-05 12:04:04

ので、まだ私は完全にそれはあなたがするつもり何が何であるかをまだ理解していなかった、しかし、これまで私が得たとして、それはあなたが（透明から左側に勾配で、黒の背景にボックスを追加したいと思います黒）から白に0.7透明度または＃C2C2C2。それがあなたがしたいことなら、私はhsl（基本的な色理論のため）を使うのではなく、むしろrgbaを使うでしょう。

チェックこのアウト：これがあなたの意図したものではなかったか、あなたはまだ何かにこだわって感じる場合

<html> 
<head> 
<style> 
#blackbg { 
background-color: black; 
height: 300px; 
} 

#grad1 { 
    height: 200px; 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); 
} 
</style> 
</head> 
<body>

、私に戻ってお気軽に。

<div id="blackbg"> 
<div id="grad1"></div> 
</div> 

</body> 
</html>

出典

2016-12-28 08:56:15 codingunicorn

uupsコードが分割されているようです... – codingunicorn

画像の背景のスライダにテキストの背景として追加したいと思います。それは暗くても軽いものでも、デスクトップからの壁紙のようなものです。あなたはhttp://eco-vpk.ruまたはこのスクリーンショットでそれを見ることができます：http://imgur.com/a/73Ozc –

大丈夫、今私はそれを手に入れます。しかし、どこにグラデーションを追加したいですか？製品はどこですか？あなたはVKPのために働いていますか、これは達成したいことですか？ – codingunicorn

CSSグラデーションの見た目を滑らかにするには？

答えて

関連する問題