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

最新推荐文章于 2019-07-27 19:37:25 发布
最新推荐文章于 2019-07-27 19:37:25 发布
阅读量395 收藏
点赞数
分类专栏： JavaScirpt 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fspwz/article/details/50482487
版权

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


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


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


希望大家能够使用愉快！

龐校長
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js+jquery实现标签背景渐变颜色，支持大部分浏览器
pow8368684的专栏
12-28 3156
说明：需要先加载jquery库 $(function() { // refreshGradient("#main_operation","#3073e5","#2d9ae6",3);//div背景颜色渐变 }); /********************************* * 设置标签背景渐变 * @param divId 标签 、 id 、className * @pa
css3背景颜色线性渐变兼容ie9浏览器方法（背景颜色线性渐变在ie9下失效问题解决）
HuangsTing的博客
07-18 1130
{ 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...
ie9背景渐变兼容
qq_16679031的博客
12-04 1031
渐变是css3得属性，所以在版本低的ie浏览器中是不显示得，修改的方法如下，已测试 background: linear-gradient(to right, #0084ff, #03A9F4); background: -moz-linear-gradient(to right, #0084ff, #03A9F4); background: -ms-linear-gradient(to r...
原生js图片渐变透明兼容ie
u013861109的博客
09-05 693
原生js图片渐变透明兼容ie
各种浏览器设置背景颜色线性渐变的方式
weixin_30559481的博客
07-27 417
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...
css实现兼容各浏览器的颜色渐变.html
11-25
纯css实现兼容各浏览器的颜色线性渐变，对角渐变，渐变角度设置，线性渐变透明度，及渐变方向、隔行变色等，支持设置结点渐变的效果。
CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
12-08
这段代码将为大部分现代浏览器提供兼容性的渐变背景效果，包括带有透明度的垂直红蓝渐变。 总结，通过理解不同浏览器对CSS3渐变的支持情况，并灵活运用各种浏览器特定的语法，我们可以创建出能够在多种浏览器中...
css3编写浏览器背景渐变背景色的方法
09-27
本文将深入探讨如何使用CSS3编写浏览器背景渐变背景色，并介绍相关的关键技术。 首先，CSS3提供了两种主要的渐变类型：线性渐变（linear-gradient）和径向渐变（radial-gradient）。线性渐变沿着一个方向平滑过渡，...
CSS 网页背景渐变实现代码
09-25
总的来说，理解并掌握CSS背景渐变的实现方式，无论是对于提升网页的视觉体验还是兼容性处理，都是非常重要的技能。随着技术的发展，CSS3渐变已成为主流，但了解IE的滤镜语法仍然有助于处理遗留的IE兼容性问题。
IE8和IE9使用filter实现渐变背景时的颜色问题
shengandshu的博客
06-29 987
linear-gradient最低只支持IE10，所以要兼容IE8和IE9的话只能使用filter替代。代码如下：filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/ -ms-filter:"progid:DXImag
用背景渐变的透明度设置不同颜色的背景渐变
weixin_33989780的博客
03-25 385
项目最近这几天正在做不同主题的颜色配置方案，要根据用户输入的颜色来配置整个主题的颜色，让人头疼的是，其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变，也就是说，要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色。我上网查了些资料，现在也有js支持根据你输入的网页内容自动填充渐变色，但是对于我这种js不是很好的人来说，还是想从css3上找点方法出来。 我发现css3的背景渐变中的透...
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
npm install *** -g ，安装后报错“不是内部或外部命令，也不是可运行的程序”
龐校長PAMPANG
09-23 8444
今天在配置安装electron的时候，可谓麻烦不断。 首先是安装了node.js，从官网上下载一个一键安装包，集成了npm，按理说应该很爽。 之后跟着electron的官网走，慢慢的等待下载安装。最后打算运行，却发现报错了！ "electron不是内部或外部命令，也不是可运行的程序"。 紧接着我在网上用npm包在安装了几个组件，统统都是这个问题。 在翻阅了很多资料之后，终于发现了问题所在
win7/win10下sublime使用Monaco字体，出现边缘发虚的情况——解决方案
龐校長PAMPANG
03-16 4062
最近将系统升级到了win10，同时也在工作中使用win7的电脑，都同样发现一个问题，就是我的编程字体：Monaco在sublime的显示会出现边缘发虚的情况。 对比其visual studio code 和 atom，则没有上面所说的， win7/win10下sublime使用Monaco字体，出现边缘发虚的情况。于是便开始寻找解决方案。大家同时编辑器，所调用的字体都是一致的，不可能有什么差别。
JS笔记-在while中使用setTimeout
龐校長PAMPANG
05-19 3731
今天在实现某些动画功能的时候，尝试着在while中调用setTimeout()函数，并在其中递增判断数值，满以为能够执行下去，但是却发现最后系统崩溃了。 a = 0; while( a < 1){ setTimeout(function(){ target.style.opacity = a; }, 250); } 经过排查，终于发现了原因： Java
gulp插件推荐，无敌好用
龐校長PAMPANG
01-15 2359
最近在折腾gulp这方面的东西，其中发现了很多非常好用的插件，现在给大家安利一下： P.S. : 如果您需要查看这些插件的具体用法，我建议您进入到  www.npmjs.com  中，查找该插件并学习使用。 或者你也可以联系我，我会尽我所能帮你解答哦~ 1、gulp-compass。 这个插件帮助使用compass编译sass文件，当然前提是你有安装ruby并搭建好sass
在项目中使用gulp
龐校長PAMPANG
04-22 2091
在项目中使用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 1774
gulp简单介绍目录 gulp简介 gulp与grunt的区别 nodejs和npm 创建一个npm项目 —— npm init . 为我的项目安装npm插件 —— npm install * gulp编写简述 —— gulp.* 在我的项目中使用gulp —— (ejs + sass) 我认为的文件目录结构 —— app, build* 我的gulpfile.js详解 寻找好用的gulp插件 ——
学会看nodeJS报错
龐校長PAMPANG
01-16 1635
今天将电脑升级了，从win7到win10。 原本兴高采烈的，但是被nodeJs耍了一把。 当我想要通过nodeJs中的npm安装一些东西的时候，一直报错。 这可把我给吓坏了，以为是win10跟nodeJs不兼容，心想装系统装了那么久，又碰到坑了。 因为第一句的npm ERR!就是说windows的版本。 连忙百度，各种折腾，慢慢的发现网上各个报错的哥们，npm ERR的那
css渐变半透背景毛玻璃效果
最新发布
06-08
在上述代码中，使用了 linear-gradient 函数设置了从右下角到左上角的渐变背景，颜色分别为白色和黑色，透明度为 0.8。同时，使用了 opacity 属性设置了元素的不透明度为 0.8，使元素呈现半透明效果。最后，使用了 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值