不太敏感/ 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线梯度背景

回答

相关问题