实现兼容各浏览器的背景渐变，透明度渐变，色彩渐变

最新推荐文章于 2019-11-25 16:44:44 发布
原创 最新推荐文章于 2019-11-25 16:44:44 发布 · 459 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个在线渐变生成工具，通过该工具可以轻松创建兼容性良好的渐变效果。特别指出，若要在元素上叠加渐变效果并确保文字清晰可见，需要额外设置一层覆盖元素。

http://www.colorzilla.com/gradient-editor/


打开这个网站，输入自己想要的参数，就可以在线生成兼容性的渐变了。


不过请注意，因为filter是覆盖在元素之上的，所以如果元素是有文字等内容需要呈现在前，则需要另外为filter配置一个新的元素。


希望大家能够使用愉快！

js+jquery实现标签背景渐变颜色，支持大部分浏览器
pow8368684的专栏
12-28 3257
说明：需要先加载jquery库 $(function() { // refreshGradient("#main_operation","#3073e5","#2d9ae6",3);//div背景颜色渐变 }); /********************************* * 设置标签背景渐变 * @param divId 标签 、 id 、className * @pa
css实现兼容各浏览器的颜色渐变.html
11-25
纯css实现兼容各浏览器的颜色线性渐变，对角渐变，渐变角度设置，线性渐变透明度，及渐变方向、隔行变色等，支持设置结点渐变的效果。
各种浏览器设置背景颜色线性渐变的方式
weixin_30559481的博客
07-27 498
1、Firefox background:-moz-linear-gradient(top, red, red 50%,red,yellow 50%,yellow,yellow); 2、Chrome、Safari background:-webkit-gradient(linear, left top, left bottom, color-stop(0.50, #ff0), c...
原生js图片渐变透明兼容ie
u013861109的博客
09-05 755
原生js图片渐变透明兼容ie
css中background:-webkit-gradient实现背景渐变效果，并且兼容各个浏览器
热门推荐
hgg923的专栏
10-16 1万+
实现渐变效果如下： 在线生成渐变样式，工具地址(很强大)：http://www.colorzilla.com/gradient-editor/ 生成样式如下： .swiper-button-prev:after {content: '';position: absolute;top: 0;right: -95px;width: 100px;height: 44
用背景渐变的透明度设置不同颜色的背景渐变
weixin_33989780的博客
03-25 468
项目最近这几天正在做不同主题的颜色配置方案，要根据用户输入的颜色来配置整个主题的颜色，让人头疼的是，其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变，也就是说，要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色。我上网查了些资料，现在也有js支持根据你输入的网页内容自动填充渐变色，但是对于我这种js不是很好的人来说，还是想从css3上找点方法出来。 我发现css3的背景渐变中的透...
css兼容浏览器的各种背景渐变
css兼容浏览器的各种背景渐变
11-25 1270
需要兼容各浏览要注意的是:必须加上浏览器的私有前缀。否则一般都是不生效的，浏览器的私有前缀主要是解决不同浏览器的兼容性问题 webkit 谷歌浏览器 安卓 moz 火狐浏览器 o opera浏览器 ms ie浏览器 首先来个简单的也最常见的隔行变色， 代码实例： background: -webkit-linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 ...
CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
12-08
这段代码将为大部分现代浏览器提供兼容性的渐变背景效果，包括带有透明度的垂直红蓝渐变。 总结，通过理解不同浏览器对CSS3渐变的支持情况，并灵活运用各种浏览器特定的语法，我们可以创建出能够在多种浏览器中...
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
09-25
需要注意的是，透明度的设置需要和背景色相结合，才能达到预期的视觉效果，例如通过设置一个固定背景色，然后在上面应用透明度渐变，可以使得渐变效果更为明显。 在实际应用中，透明度的设置还可以应用于半透明层的...
js实现透明度渐变效果的方法
10-24
实现透明度渐变效果的关键在于对透明度值的控制和浏览器兼容性的处理。 知识点一：透明度的获取与设置 在JavaScript中，无法直接通过属性获取或设置元素的透明度，因此需要采用间接的方法。一般通过设置元素的CSS...
ie9背景渐变兼容
qq_16679031的博客
12-04 1120
渐变是css3得属性，所以在版本低的ie浏览器中是不显示得，修改的方法如下，已测试 background: linear-gradient(to right, #0084ff, #03A9F4); background: -moz-linear-gradient(to right, #0084ff, #03A9F4); background: -ms-linear-gradient(to r...
css3背景颜色线性渐变兼容ie9浏览器方法（背景颜色线性渐变在ie9下失效问题解决）
HuangsTing的博客
07-18 1234
{ background:linear-gradient(178deg,rgba(99,91,254,1) 0%,rgba(105,114,255,1) 100%); background:-moz-linear-gradient(178deg,rgba(99,91,254,1) 0%,rgba(105,114,255,1) 100%); background:-webkit-linear-gra...
IE8和IE9使用filter实现渐变背景时的颜色问题
shengandshu的博客
06-29 1072
linear-gradient最低只支持IE10，所以要兼容IE8和IE9的话只能使用filter替代。代码如下：filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/ -ms-filter:"progid:DXImag
npm install *** -g ，安装后报错“不是内部或外部命令，也不是可运行的程序”
龐校長PAMPANG
09-23 8707
今天在配置安装electron的时候，可谓麻烦不断。 首先是安装了node.js，从官网上下载一个一键安装包，集成了npm，按理说应该很爽。 之后跟着electron的官网走，慢慢的等待下载安装。最后打算运行，却发现报错了！ "electron不是内部或外部命令，也不是可运行的程序"。 紧接着我在网上用npm包在安装了几个组件，统统都是这个问题。 在翻阅了很多资料之后，终于发现了问题所在
win7/win10下sublime使用Monaco字体，出现边缘发虚的情况——解决方案
龐校長PAMPANG
03-16 4234
最近将系统升级到了win10，同时也在工作中使用win7的电脑，都同样发现一个问题，就是我的编程字体：Monaco在sublime的显示会出现边缘发虚的情况。 对比其visual studio code 和 atom，则没有上面所说的， win7/win10下sublime使用Monaco字体，出现边缘发虚的情况。于是便开始寻找解决方案。大家同时编辑器，所调用的字体都是一致的，不可能有什么差别。
JS笔记-在while中使用setTimeout
龐校長PAMPANG
05-19 3975
今天在实现某些动画功能的时候，尝试着在while中调用setTimeout()函数，并在其中递增判断数值，满以为能够执行下去，但是却发现最后系统崩溃了。 a = 0; while( a < 1){ setTimeout(function(){ target.style.opacity = a; }, 250); } 经过排查，终于发现了原因： Java
gulp插件推荐，无敌好用
龐校長PAMPANG
01-15 2439
最近在折腾gulp这方面的东西，其中发现了很多非常好用的插件，现在给大家安利一下： P.S. : 如果您需要查看这些插件的具体用法，我建议您进入到  www.npmjs.com  中，查找该插件并学习使用。 或者你也可以联系我，我会尽我所能帮你解答哦~ 1、gulp-compass。 这个插件帮助使用compass编译sass文件，当然前提是你有安装ruby并搭建好sass
在项目中使用gulp
龐校長PAMPANG
04-22 2174
在项目中使用gulphttp://pampang.github.io/2016/02/02/%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8gulp/目录 为什么要使用gulp？ 使用gulp之后，我们的技术选型是怎样的？ 使用gulp之后，我们的项目可以变成怎么样？ 使用gulp之后，我们的项目怎么放？ 现在有什么gulp命令？ 有啥管用
gulp简单入坑介绍
龐校長PAMPANG
01-09 1868
gulp简单介绍目录 gulp简介 gulp与grunt的区别 nodejs和npm 创建一个npm项目 —— npm init . 为我的项目安装npm插件 —— npm install * gulp编写简述 —— gulp.* 在我的项目中使用gulp —— (ejs + sass) 我认为的文件目录结构 —— app, build* 我的gulpfile.js详解 寻找好用的gulp插件 ——
PostCSS插件修复老旧浏览器CSS渐变透明度问题
资源摘要信息:"postcss-gradient-transparency-fix是一个专门针对PostCSS的插件，它被设计用来解决在旧版浏览器中CSS渐变透明度显示不正确的问题。尤其是在像Safari这样的浏览器中，该插件通过特定的颜色值替换CSS中...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值