如何讓CSS漸變看起來流暢？

我有一個黑色的背景，並希望與簡單的CSS梯度內添加塊從透明到0.7白色：如何讓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

有一天，我希望，我們有這樣的：

linear-gradient(
    to top, 
    hsla(330, 100%, 45%, 0), 
    cubic-bezier(0.45, 0, 0.5, 0.5), 
    hsla(330, 100%, 45%, 1) 
);

博特現在，我們有這樣的：

PostCSS插件有2種選擇：https://github.com/larsenwork/postcss-easing-gradients
一個應用程序允許你選擇一個緩動功能：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漸變看起來流暢？

回答

相關問題