位置: 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)

  • 税金及附加怎么来的
  • 手机上可以开个人劳务发票吗
  • 其他个人出租不动产
  • 工人工资算生产总值吗
  • 以件数为印花税计税依据的有哪些
  • 质保金一年怎么写
  • 简易计税开的发票可以抵扣吗
  • 红字信息表撤销失败B80095
  • 固定资产报废需要哪些人签字
  • 什么是资金账簿印花税
  • 预付账款怎么处理
  • 工业企业会计错账处理方法有哪些
  • 微信提现手续费最新规定
  • 小规模公司退税
  • 职工福利部门的工资
  • 地税没报税怎么办
  • 金税三期如何报个税
  • 国税里发票采集中的税控机动车发票是指什么发票?
  • 农产品加工业数据
  • 逃避缴纳税款罪移送公安标准
  • 房产税税率2023税率表
  • 房地产停车场属于公共配套设施吗
  • 太阳能真空管和普通管的区别
  • 公司注销后资产属于谁
  • 免税行业企业
  • 个体户营业收入超过500万
  • 成本类科目有哪四个
  • 会计新手入门
  • 汇算清缴发现以前预缴报表资产错误
  • 计提汽车折旧会计分录
  • 收到政府财政拨款用于购买生产设备
  • internet笔记
  • php 守护进程
  • 私立医院执行什么会计准则
  • Win11 Build10.0.22000.51预览版正式推送 (附完整更新日志)
  • 其他应付款余额在借方表示什么意思
  • 逾期未收回包装物押金税率
  • 外购货物应抵扣的进项税额
  • 部门活动经费怎么算
  • 192.168.2.1 路
  • 什么是收付实现制?什么是权责发生制?
  • 比特币形式投资是否诈骗
  • vmware vmtools
  • mysql分区实现
  • 什么是其他综合收益,包括哪些内容
  • 哪些情形需要办理会计工作交接
  • 结算备付金管理办法(2019年修订版)
  • 金融企业往来支出属于费用吗
  • 企业现金支付的范围
  • 资产处置损益是什么类
  • 原始凭证分割单可以入账么
  • 微信小程序 滚动 变色
  • sqlserver2000分页
  • 查询sqlserver数据库开发这门课程的最高分
  • 被财政收回的财物有哪些
  • 暂估收入的会计分录怎么写
  • 银行进账单是什么样子的
  • 租来设备本身原因致人损害
  • 车间成本项目如何结转
  • 原股东将全部股权转让
  • 理解 成为 超越梗
  • 如何用pe弄双系统引导
  • windows windows.old
  • 如何重装windows8
  • smss.exe是干嘛的
  • windows log在哪里
  • windowsxp如何隐藏文件
  • win8快速启动怎么开启
  • python 效率优化
  • javascript module
  • 我的自定义计划怎么删除
  • javascript面向对象编程指南
  • jquery 获取html
  • python tornado django
  • 病历证明在医院保存多久
  • 青海国税局官网
  • 江苏电子税务局社保缴费查询网站
  • 税务稽查审理的基本原则
  • 综治中心能取代公务员吗
  • 山西省税务局网站系统维护公告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设