不太敏感/ CSS線梯度背景

因爲我發現它challanging創建靜態圖像的背景，如下面的例子中，響應並覆蓋不同的分辨率和高度/寬度，我用CSS3顏色梯度再現相同的背景思維和使其動態拉伸。不太敏感/ CSS線梯度背景

我會在並欣賞工具/提示&技巧的/ etc如何重建這樣的背景與CSS任何輸入。我已經看過用於生成CSS規則，如http://www.css3factory.com/linear-gradients在線工具，但這些不會產生兩種顏色之間明顯的界限，如在我的例子。

Example background

來源

2014-04-14 Ismar Slomic

我已經看過不同的在線工具，用於創建基於不同的選擇CSS規則，但沒有人真正讓我重新創建相同的背景在這裏。 –

嘗試與rgba()顏色與不透明度設置在每其他的頂部2線性梯度，第一至幾％（或hsla()），第二個具有100％的不透明度。關於這樣的：

background: 
    linear-gradient(
    130deg , 
    rgba(171, 17, 51, 1) 30%, 
     rgba(255, 51, 102, 0.75) 
    ), 
    linear-gradient(
    200deg , 
    #AB1133 50%, 
     #FF3366 50% 
    ) 
    ;

DEMO它調整到您的需要

來源

2014-04-14 20:34:12

在第二個線性漸變中使用十六進制而不是rgba/hsla顏色有什麼原因嗎？ –

它並不需要被translucide :)這是使點清晰居然 –

謝謝！你知道通過使用CSS和瀏覽器這個渲染速度有多快嗎？我認爲根據分辨率下載76-400KB圖像文件會更快。 –

不太敏感/ CSS線梯度背景

回答

相關問題