位置: IT常识 - 正文

css设置渐变色(css设置渐变色背景)

编辑:rootadmin
css设置渐变色 css如何设置自定义渐变色?线性渐变篇

推荐整理分享css设置渐变色(css设置渐变色背景),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css 设置渐变,css怎么设置渐变色,css设置渐变色颜色从中间到两边上下,css设置渐变色从上到下,css设置渐变色颜色从中间到两边上下,css设置渐变色颜色从中间到两边上下,css设置渐变色从上到下,css设置渐变色从上到下,内容如对您有帮助,希望把文章链接给更多的朋友!

CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡

CSS定义了三种渐变类型:

Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/对角线Radial Gradients (defined by their center) 由中心定义Conic Gradients (rotated around a center point) 绕一个中心点旋转CSS线性渐变 (Linear Gradients)

要创建线性渐变,您必须定义至少两个颜色停止。颜色停止是您想要渲染之间平滑过渡的颜色。您还可以设置一个起点和方向(或角度)以及梯度效果。

语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);Direction - Top to Bottom (这是默认,从上到下)

下面的例子显示了一个从顶部开始的线性渐变。开始是红色,然后变成黄色:

#grad { background-image: linear-gradient(red, yellow);}Direction - Left to Right (从左到右)css设置渐变色(css设置渐变色背景)

下面的例子显示了一个从左侧开始的线性渐变。开始是红色,然后变成黄色:

#grad { background-image: linear-gradient(to right, red , yellow);}Direction - Diagonal (对角线)

您可以通过指定水平和垂直的起始位置来创建斜角渐变。 下面的示例显示了从左上角开始(到右下角)的线性渐变。开始是红色,然后变成黄色:

#grad { background-image: linear-gradient(to bottom right, red, yellow);}

如果你想对渐变的方向有更多的控制,你可以定义一个角度,而不是预定义的方向(向下,上,向右,向左,向右,等等)。0度的值相当于“to top”。90度的值相当于“向右”。180度的值相当于“到底”。

语法:

background-image: linear-gradient(angle, color-stop1, color-stop2);

下面的例子展示了如何在线性渐变中使用角度:

#grad { background-image: linear-gradient(180deg, red, yellow);}使用多种颜色的stop

下面的例子显示了一个线性渐变(从上到下)与多个颜色停止:

#grad { background-image: linear-gradient(red, yellow, green);}

下面的例子展示了如何创建一个线性渐变(从左到右),颜色为彩虹和一些文本:

#grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}使用透明

CSS渐变也支持透明度,可以用来创建渐隐效果。 为了增加透明度,我们使用rgba()函数来定义颜色停止。rgba()函数中的最后一个参数可以是0到1之间的值,它定义了颜色的透明度:0表示完全透明,1表示完全透明(不透明)。 下面的例子显示了一个从左侧开始的线性渐变。它开始完全透明,过渡到全红色:

#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}重复一个线性渐变

repeat -linear-gradient()函数用于重复线性梯度,

#grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
本文链接地址:https://www.jiuchutong.com/zhishi/299102.html 转载请保留说明!

上一篇:第8章 后处理 MATLAB学习笔记(后处理作用)

下一篇:vue中的map()快速使用(vue-mapvgl)

  • 金税盘开票软件换电脑后怎么操作
  • 企业所得税的会计核算
  • 作废的增值税普通发票还可以重新开吗?
  • 小规模纳税人免税账务处理
  • 监理行业增值税税率多少
  • 加计抵减税额账务处理
  • 坏账计提坏账准备
  • 资产减值损失可以抵税吗
  • 其他综合收益的税后净额怎么计算
  • 去年税收滞纳金计入什么科目
  • 违约金 罚款
  • 地税没报税怎么办
  • 招待费多少
  • 其他应付款转营业外收入说明
  • 对公账户收到个人汇款 退还
  • 交易性金融资产的账务处理
  • 盘点固定资产
  • 应收账款保理会计处理 会计视野
  • 平均净资产和净资产
  • 增值税免税项目和免征增值税的区别
  • 企业将自有资金无偿提供
  • php导入
  • 澳大利亚太平洋银行
  • 补缴以前月份的个人所得税
  • 票据贴现办法
  • 苹果发布macOS更新
  • 担保损失会计分录
  • 梅萨维德国家公园特点
  • 在建工程完成后转入什么科目
  • 机票报销需要哪些才可以
  • 转让企业要交什么税
  • opencv模板匹配多目标旋转
  • nodejs安装及环境配置win7
  • 中国烟草资产负债表
  • 计算分配本月职工工资会计分录
  • 一般纳税人普通发票做账
  • 企业对外报送的财务报表
  • 残疾人报税怎么报
  • scrapy csdn
  • phpcms缩略图不要自动裁剪的设置方法
  • 基本户和一般户可以互相转账吗
  • 管理费用核算的是
  • 哪些属于费用发票类型
  • 公司注销前欠客户钱
  • 销售提成如何入账
  • 借银行存款贷预收账款是哪个凭证
  • 折价购买股权账务处理
  • 城建税如何计提税金
  • 期末库存商品怎么结转
  • 单位食堂收费制度
  • 没有票的成本怎么处理
  • 退回上年度企业所得税
  • 汽车几年折旧年限
  • mysql字段名可以用中文吗
  • mysql获取当前行数
  • centos 命令
  • mac 命令大全
  • linux系统百科
  • ubuntu英文系统安装中文输入法
  • win7能不能安装vs2019
  • win8软件不兼容怎么办
  • linux系统的配置
  • jquery跟随鼠标移动
  • 微信小程序吸血鬼 豹女
  • javascript中常见的数据类型有哪些?
  • unity自动寻路插件
  • jquery crud
  • MATLAB图像处理实例详解
  • unity获取ui
  • Zero Clipboard js+swf实现的复制功能使用方法
  • javascript基本语句
  • Android Studio --自动删除没有用的资源,给APK减减肥
  • qq个人资料显示王者战绩
  • 广东增值税电子普通发票图片
  • 深圳12366怎么转人工
  • 营改增之前建筑业税率是多少
  • 江苏税务登录密码是几位
  • 财税招商专员是做什么的
  • 乌鲁木齐市公立幼儿园有哪些
  • 发票真伪查询国税官网12366
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设