css - 一种颜色完全透明的线性渐变？

Question

我正在尝试制作类似于 http://focuslabllc.com/journal 上的主题页脚.

但是，我不想为左侧部分设置颜色，而是使用图像。

有没有办法使用 css 对背景进行分层，以便底层是图像，然后在其上方的渐变背景在一端透明并从 60%(向右)开始着色？

也许更简单，你能有一个只有一种颜色透明的线性渐变背景吗？

Answer 1

是的，绝对是。您需要结合 multiple background images 的语法(用逗号分隔声明，顶层在前)与 RGBA 颜色渐变的声明。我喜欢使用在线生成器来制作渐变，例如 http://colorzilla.com/gradient-editor/ .

这是一个例子:

background: linear-gradient(to right, rgba(167,207,223,0) 0%,rgba(35,83,138,0.95) 100%), url(http://placekitten.com/610/600);

这是一个现场演示:http://codepen.io/KatieK2/pen/pHkFe