在html中怎么写背景色渐变,css3背景色渐变

css3背景色渐变难是不难,就是麻烦。不同浏览器用法不同,还有个爱掺和的ie。。。

一. Webkit浏览器

(1) 第一种写法:

background:-webkit-gradient(linear ,10% 10%,100% 100%,

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数:表示的是渐变的类型

linear线性渐变

第二个参数:分别对应x,y方向渐变的起始位置

第三个参数:分别对应x,y方向渐变的终止位置

第四/五/N个参数:设置渐变的位置及颜色

(2)第二种写法:这种写法比较简单,而且效果比较自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));

第一个参数:表示的是渐变的类型

linear线性渐变

第二个参数:分别对应x,y方向渐变的起始位置

第三个参数:分别对应x,y方向渐变的终止位置

第四个参数:设置了起始位置的颜色

第五个参数:设置了终止位置的颜色

二.Mozilla浏览器

(1)第一种写法:

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一个参数:设置渐变起始位置及角度

第二/三/四/N个参数:设置渐变的颜色和位置

(2)第二种写法:这种写法比较简单,而且效果比较自然

background:-moz-linear-gradient(top, #FFC3C8,#FF9298);

第一个参数:设置渐变的起始位置

第二个参数:设置起始位置的颜色

第三个参数:设置终止位置的颜色

三.IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);

第一个参数:渐变起始位置的颜色

第二个参数:渐变终止位置的颜色

第三个参数:渐变的类型

0 代表竖向渐变        1  代表横向渐变

P.S.这里设置背景的时候不需要给background设置,直接用filter即可,不要和其他的浏览器混淆

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/551266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

混凝土墙开洞_易县混凝土剪力墙切割常见问题

易县混凝土剪力墙切割常见问题北京专业切割 承接水泥地面切割路面切割 混凝土地面切割 地面切割开线槽 楼板切割 墙体切割 柱子切割 沥青地面切割 洋灰地面切割 切割开线槽 。是一个以建筑液压钳拆除结构加固和切割拆除、水钻钻孔的综合性公司。加固设计、混凝土外部粘钢加固、…

html中怎么写播放音乐格式,HTML+CSS入门 如何实现多浏览器播放wav格式的音频文件...

本篇教程介绍了HTMLCSS入门 如何实现多浏览器播放wav格式的音频文件&#xff0c;希望阅读本篇文章以后大家有所收获&#xff0c;帮助大家HTMLCSS入门。<使用audioplayer.js 基本上能支持大部分浏览器播放wav音频文件&#xff0c;经测试IE、火狐、google浏览器都可以播放编码…

差分放大电路差模共模公式_差分放大电路对差模信号和共模信号有什么影响?...

现在在应用中使用的放大电路一般都是由各级级联组成的&#xff0c;直接级联的放大电路各级的直流通路相互关联&#xff0c;因而当前级的静态工作点由于某种原因而稍有偏移时&#xff0c;这种缓慢的微小变化就会逐级影响&#xff0c;致使放大器的输出端产生较大的电压漂移&#…

html本地载入缓存文件,Flutter中如何加载并预览本地的html文件的方法

搜索热词直接进入主题&#xff0c;大概步骤如下在 assets 创建需要访问 html 文件&#xff0c;如下这里创建一个files文件夹&#xff0c;专门来放这些静态 html 文件.在 pubspec.yaml 中配置访问位置assets:- assets/images/- assets/files/在 pubspec.yaml 添加 webview_flutt…

三维数据平滑处理_关于CAD三维对象建模

下面是本公众号文章分类目录&#xff0c;点击标题文字可打开分类文章列表&#xff1a;安装卸载 异常、退出 文件及输入输出 基本操作技巧 设置及相关问题 界面和显示 快捷键 视图设置和调整 图层管理 颜色 线型 字体、文字样式和文字输入 标注、引线和标注样式 坐标系…

html下拉列表框的长度,HTML中如何定义下拉列表框的默认长度?

一共两个文件,html页面里面调用js文件就可以了,不是要把代码也复制到html文件里面^……联动菜单 是这个意思吗?实现方法很多 推荐一个比较好的:琥珀联动菜单以下信息为琥珀联动菜单&#xff1a;(在此感谢作者&#xff01;)下面是静态页面&#xff1a;HPMenu_Demo.html<html…

3蛋白wb_老司机手把手教你选WB内参

俗话说&#xff0c;一个生物学博士&#xff0c;要跑满1000面胶才能毕业。今天特邀实验室博三大师兄&#xff0c;和大家聊一聊WB内参那些小事。选择好合适并且好跑的内参&#xff0c;WB实验也就成功了一半。1. 什么是内参&#xff1f;内参即内部参照&#xff0c;一般是指由管家基…

制作支付页面弹框html,JS实现仿微信支付弹窗功能_蜡烛_前端开发者

先奉上效果图/p>body {margin: 0;padding: 0;font-size: 0.3rem;font-family: "微软雅黑", arial;}ul,li {margin: 0;padding: 0;list-style: none;}img {display: block;}#myBtn {display: block;width: 80%;height: auto;margin: 5rem auto;padding: 0.2rem;bor…

华为二层创建vlan_二层交换机不同VLAN实现互通 (华为)

1 &#xff0c;实验名称&#xff1a;二层交换机不同VLAN实现互通 (华为)2&#xff0c;实验环境&#xff1a;(1)PC1 PC2(2)二层交换机两台(3)三层交换机一台(路由功能)3&#xff0c;实验拓扑&#xff1a;2 配置步骤&#xff1a;(1)配置PC1&#xff1a;IP &#xff1a;192.168.10…

html 360不识别,html 为什么在ie里显示正常在360浏览器不正常呢?

匿名用户1级2016-07-19 回答需要ie和webkit类浏览器兼容css&#xff1a;.search_box {position: relative;width: 360px;overflow: visible;}.search_box * {margin: 0;padding: 0;list-style: none;font: normal 12px/1.5em "宋体", Verdana, Lucida, Arial, Helvet…

主板24pin接口详图_【图解】主板连线接口最详尽图文解释

【图解】主板连线接口最详尽图文解释我为人人&#xff0c;公益分享&#xff01;论坛地址&#xff1a;chayunyx.uueasy.cn本文结构&#xff1a;一、认识主板供电接口图解安装详细过程二、认识CPU供电接口图解安装详细过程三、认识SATA串口图解SATA设备的安装四、认识PATA并口图解…

matlab 判断鼠标按下_轻巧可爱,支持多设备——雷柏Ralemo Air1乐萌鼠标

手机可以连接显示器&#xff0c;变成桌面系统&#xff0c;iPadOS支持鼠标操作&#xff0c;越来越多的智能设备都可以做到轻办公的使用需求&#xff0c;而办公必不可少就是鼠标&#xff0c;如果说为了每个设备都配个鼠标未免有点太过奢侈&#xff0c;今天介绍一款造型独特&#…

电子科学与技术与计算机专业,计算机科学与技术专业和电子科学与技术专业,哪个好些?...

作为计算机科学与技术专业的学生&#xff0c;这个必须怒答一波&#xff0c;其他学校我是不清楚&#xff0c;就我们学校&#xff0c;我们专业简直比电子科学与技术好太多。先说说培养方案吧计算机科学与技术:本专业培养具有良好的科学素养&#xff0c;系统掌握计算机科学与技术,…

商品进销差价_商品进销差价概述

借&#xff1a;商品进销差价贷&#xff1a;主营业务成本(1)正确计算已销商品进销差价&#xff0c;存货金额减去商品进销差价就是企业存货的购进成本。本科目应按商品类别或实物负责人设置明细账&#xff0c;明细账通常用三栏式账页。用进销差价法核算的&#xff0c;本月已售商品…

html中ng-src,angularjs – 在ng-src中使用{{}}绑定,但不会加载ng-src

我一直在试图绑定一个值到ng-src的img HTML元素无效。AngularJS代码&#xff1a;app.controller(footerCtrl,function($scope,userServices){$scope.avatar_url;$scope.$on(updateAvatar,function(){$scope.avatar_url userServices.getAvatar_url();});}app.factory(userServ…

kafka topic 一段时间不消费_全网最通俗易懂的 Kafka 入门

众所周知&#xff0c;消息队列的产品有好几种&#xff0c;这里我选择学习Kafka的原因&#xff0c;无他&#xff0c;公司在用。我司使用的是Kafka和自研的消息队列(Kafka和RocketMQ)改版&#xff0c;于是我就想学学Kafka这款消息队列啦。本篇文章对Kafka入门&#xff0c;希望对大…

微型计算机技术及应用 考试,陕西理工学院微型计算机技术及应用考试试卷(5份)...

内容简介&#xff1a;陕西理工学院微型计算机技术及应用考试试卷1一、单项选择题。1、微型计算机中主要包括有( )。A、微处理器、存储器和I/O接口 B、微处理器、运算器和存储器C、控制器、运算器和寄存器组 D、微处理器、运算器和寄存器2、指令( )的源操作数的寻址方式为直接寻…

cups源码下载 linux_【正点原子FPGA连载】第九章Linux显示设备的使用-领航者ZYNQ之linux开发指南...

1&#xff09;实验平台&#xff1a;正点原子领航者ZYNQ开发板2&#xff09;平台购买地址&#xff1a;https://item.taobao.com/item.htm?&id6061601087613&#xff09;全套实验源码手册视频下载地址&#xff1a;http://www.openedv.com/docs/boards/fpga/zdyz_linhanz.htm…

河北微型计算机原理专接本,河北省专接本(微机原理与接口技术知识点总结)

它们的差别在于对负数的表示。第一章概述(1)原码一、计算机中的数制定义&#xff1a;1、无符号数的表示方法&#xff1a;符号位&#xff1a;0 表示正&#xff0c;1 表示负&#xff1b;(1)十进制计数的表示法数值位&#xff1a;真值的绝对值。特点&#xff1a;以十为底&#xff…

java程序启动后就进行了7次younggc_程序员如何优化 Java GC

本文由CrowHawk翻译Sangmin Lee发表在Cubrid上的”Become a Java GC Expert”系列文章的第三篇《How to Tune Java Garbage Collection》,本文的作者是韩国人&#xff0c;写在JDK 1.8发布之前&#xff0c;虽然有些地方有些许过时&#xff0c;但整体内容还是非常有价值的。译者此…