使用css3背景渐变中的透明度来设置不同颜色的背景渐变
作者：佚名
字体：[ ] 来源：互联网 时间：03-31 11:36:32
根据用户输入的颜色来配置整个主题的颜色，发现css3的背景渐变中的透明度可以解决这个问题，具体的实现如下，大家可以参考下
项目最近这几天正在做不同主题的颜色配置方案，要根据用户输入的颜色来配置整个主题的颜色，让人头疼的是，其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变，也就是说，要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色。我上网查了些资料，现在也有js支持根据你输入的网页内容自动填充渐变色，但是对于我这种js不是很好的人来说，还是想从css3上找点方法出来。 我发现css3的背景渐变中的透明度可以解决这个问题（前提是背景渐变的颜色是相近的）。 我在这里简单说一下css3背景渐变中的线性渐变。线性渐变的一般结构是： 代码如下: background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 其中各个浏览器渲染不同，又分为： Webkit: 代码如下: background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 渐变类型 - 在属性里-webkit-linear-gradient 渐变从哪开始(top) 颜色取值和在渐变中的位置 (rgba(0,0,0,0.1) 40%) 下面的写法是用于safari旧版本的 代码如下: background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF)); 渐变类型 (linear) 渐变开始的X Y 轴坐标(0 0 或者left-top) 渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 颜色取值 (color-stop(40%, rgba(0,0,0,0.1))) Mozilla: 代码如下: background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); Firefox渲染渐变的写法和Safari大致相同，不同的是需要将渐变属性改为-moz-linear-gradient Opera: 代码如下: background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 按照上面的写法，让Opera浏览器渲染直接将属性改为-o-linear-gradient，是不是很简单？ IE: IE比较顽固，不支持渐变，但是提供了渐变滤镜 代码如下: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#'); 说了这么多，大家对例子里rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇？没错，解决这个头疼问题的关键就是它 - 渐变透明度。设置渐变透明度（值从0.1-0.9）可以使渐变颜色处在不同值的透明度下，也就是说通过透明度，背景可以呈现不同透明度下的背景颜色。 下面图片是用上面代码生成的背景渐变： 是不是看不出渐变透明（感觉灰灰的）？没错，因为颜色取值是从白到黑，那中间的过渡色自然就是灰色的了。但是如果你在加上一个背景颜色的话，那效果就出来了。 比如我们加个background-color: #92D050： 你只需要配置background-color, 就可以让背景呈现不同的渐变色。 完整的代码： 代码如下: background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#'); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); background-color: #669900; 其中rgba()中的颜色(rgb)一般取白色（255，255，255）或者黑色（0,0,0）, 而透明度的设置就看你自己想要什么样的渐变效果了。 下面是几个不同渐变色的例子： &代码如下: background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 代码如下: background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 代码如下: background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%); 所以如果能很好的运用背景渐变的透明度，可以在很大程度上定义统一的背景渐变色，而用户只需要输入一个颜色域，就可以把主题配置成想要的渐变效果。不过遗憾的是，这种方法就现在而言，只能适用于背景渐变颜色相近的主题。多余一种颜色的背景渐变还是得用这种写法 代码如下: background: linear-gradient(to bottom, #396E8E 0%, #%, #%, #194E6E 100%);
大家感兴趣的内容
12345678910
最近更新的内容热门搜索：
您的位置： -&
软件教程分类查找
非常抱歉！2345软件大全没能为您提供完善服务，万分感谢能得到您的指点！
您的建议：
第二章 了解术语
第三章 快捷键
第四章 常见问题
第五章 安装说明
第六章 打印
第二章 工具综合简介
第三章 选区相关工具
第四章 绘图工具
第五章 文本工具
第二章 具体浮动面板介绍
第三章 浮动面板运用实例
第二章 抠取图片方式
第三章 抠图实例
第四章 蒙版与通道
第五章 合成图片须知
第六章 合成图片实例
第二章 调色方法
第三章 图片调色校正实例
第四章 颜色调整实例
第五章 色调调整实例
第二章 图层应用实例
第二章 滤镜实例
第二章 图片特效制作
第三章 图片美化实例
第二章 面部美容
第三章 面部化妆
第四章 皮肤
第五章 身材
第二章 绘图实例
第三章 笔刷介绍
第四章 笔刷实例
第二章 特效文字实例
第二章 动画实例
第二章 网页图片布局技巧
精品软件课程
人气：4860591
photoshop教程让你从入门到精通，从新手快
人气：957557
AutoCAD是美国Autodesk公司开发的计算机辅
人气：493823
CorelDRAW是一款由Corel公司开发的矢量图形
人气：308518
光影魔术手（nEO iMAGING）是一款对数码照
小游戏推荐
渐变透明的光感效果
出处：2345软件大全
人气：21057
您可能感兴趣的问题：
核心提示：渐变透明的光感效果，打造唯美的光感效果。
　　先看一下效果：
　　钢笔绘制选区，然后将路径做为选区载入
　　选区存储为通道
　　羽化选区，羽化40，根据自己效果调整，用白色填充选区
　　载入刚刚存储的通道选区，按DEL键删除多余的白色
　　调整图层透明度，大概40%―60%，自己喜好调整
　　同理制作其他线条，最后可以用橡皮擦修饰调整
　　最终效果
相关教程推荐
相关软件推荐
资源统计：无插件软件：185610个 无病毒软件：185923个 昨日已处理144个带插件、病毒的软件
本站总软件：185923个 软件总下载次数：23.289亿次
软件教程文章：102604篇 总浏览次数：3.303亿次后使用快捷导航没有帐号？
只需一步，快速开始
查看: 3723|回复: 4
ps使用颜色渐变.为什么不透明呢？
UID285214在线时间 小时积分1301帖子离线17254 天注册时间
银牌会员, 积分 1301, 距离下一级还需 1699 积分
PS里面对一个矩形添加颜色渐变.从红色到白色的渐变.其中白色的不透明度为0
但是为什么出来的效果是红色到白色，而不是红色逐渐过度到透明呢？
UID293908在线时间 小时积分4076帖子离线17254 天注册时间
金牌会员, 积分 4076, 距离下一级还需 924 积分
应该是渐变图层底下的图层是白色的，如果没有，在保存的时候保存成GIF活PNG
UID229278在线时间 小时积分128帖子离线17254 天注册时间
初级会员, 积分 128, 距离下一级还需 72 积分
先添加图层蒙板,再渐变就可以了
UID348294在线时间 小时积分271帖子离线17254 天注册时间
中级会员, 积分 271, 距离下一级还需 229 积分
何不改成直接红色到透明的渐变呢
UID118741在线时间 小时积分7174帖子离线17254 天注册时间
看你的工具条上,渐变的选项透明区域是不是没有勾选,如图.
未标题-2.jpg (15.74 KB, 下载次数: 0)
19:42 上传
如果没有勾选把它勾选之后就能拉出实色到透明的渐变了!!!
Powered byPS半透明渐变_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
PS半透明渐变
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢}