位置: IT常识 - 正文

CSS渐变背景看这一篇就够了(背景渐变 css)

编辑:rootadmin
CSS渐变背景看这一篇就够了 CSS渐变背景看这一篇就够了

推荐整理分享CSS渐变背景看这一篇就够了(背景渐变 css),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css背景色渐变色,css设置渐变背景,css背景色渐变色,css背景渐变填充怎么设置,css渐变背景色,css 渐变背景,css渐变背景色,css背景色渐变色,内容如对您有帮助,希望把文章链接给更多的朋友!

在我们自己设计网页的时候,为了好看美观,颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景,和一些常用的颜色网站。

CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩,看能玩出什么花来。

CSS 定义了两种渐变类型:

一、线性渐变(向下/向上/向左/向右/对角线)

我们通过属性 linear-gradient来这样定义一个线性渐变。

background-image: linear-gradient( 方向/角度 , 颜色1,颜色2,颜色3....);

方向: 在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字。

从上到下(默认)

例如:background-image: linear-gradient(#FF0000,#FFF200, #1E9600);

从下到上

例如:background-image: linear-gradient(to top, #FF0000,#FFF200, #1E9600);

从左到右

background-image: linear-gradient(to right, #FF0000,#FFF200, #1E9600);

从右到左

background-image: linear-gradient(to left, #FF0000,#FFF200, #1E9600);

从左上到右下

当然我们可以使用多个关键字,例如 to bottom right ,表示从左上到右下结束。

background-image: linear-gradient(to right bottom , #FF0000,#FFF200, #1E9600);

很多方向不举例了使用角度来定义方向

除了使用关键字to +方向名词外,我们还可以使用角度去任意的规定。

我们都知道在一个平面上角度只有360度,就是一个圆。

使用角度来取代预定义的方向(向下、向上、向右、向左、向右下等等)。值 0deg 等于向上(to top)。值 90deg 等于向右(to right)。值 180deg 等于向下(to bottom)。

我们填的是终点的的角度,起点为对角线的角度 例如:

background-image: linear-gradient(45deg, #FF0000,#FFF200, #1E9600);

表示从起点从225度到45度结束的渐变。

平铺的线性渐变

当然颜色还可以使用rgb模式,这样就可以使用透明度了。 例如:

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));CSS渐变背景看这一篇就够了(背景渐变 css)

repeating-linear-gradient() 函数用于重复线性渐变 例如: 从左下角开始绘制渐变,前20像素是橙色,此后直至30像素的位置过渡到红色,然后直至40像素的位置再过渡到紫色。绘制完这个渐变后,浏览器会像平铺图像那样把这个渐变铺满整个背景。

background-image: repeating-linear-gradient(45deg, #F27121 20px, #E94057 30px, #8A2387 40px);

二、径向渐变(由其中心定义)

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。有一种水波扩散的感觉。

我们通过 radial-gradient();来定义一个径向的渐变。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 为椭圆形,size 为最远角,position 为中心。

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse(椭圆)。

size 参数定义渐变的大小。它可接受四个值:

closest-side :从中心点向外扩展渐变,到离中心点最近的一边结束。 farthest-side :以离渐变中心点最远的那一边计算圆的半径 closest-corner :以离渐变中心点最近的元素顶角计算渐变的范围。 farthest-corner :以离渐变中心点最远的顶角计算圆的半径。

均匀间隔的色标(默认)

例如:

background-image: radial-gradient(#d63c21, #e0d865);

当我改变为圆形,并换上合适的颜色

background-image: radial-gradient(circle, red, yellow, green);

设置径向渐变的中心点

用关键字 at 后面加上 position 属性支持的定位关键字和数值,指定渐变中心的位置。

调整大小和颜色百分比后 例如:

.item1 { height: 150px; width: 150px; margin-left: 20%; background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); }

这么好看的太阳你以后还会用照片吗?上面的例子是把中心点设置在元素的距离左上角(60% 55%)。并以 以离渐变中心点最远的顶角计算圆的半径。

平铺的径向渐变

例如:

background-image: repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 60px, #4F9C9C 60px, #57c6e1 80px, #99CCCC 80px, #eea2a2 100px);

写在最后

这就是就是背景渐变的全部内容了。如果有好看的渐变效果,麻烦评论区打出来。让我看看各位大佬的色彩搭配效果。让我欣赏欣赏。

渐变颜色 CoolHue 2.0 uigradients 这几个网站是我常用的色彩渐变的网站。大家有什么好的网站评论区分享。

本文链接地址:https://www.jiuchutong.com/zhishi/300119.html 转载请保留说明!

上一篇:AttributeError: cannot assign module before Module.__init__() call

下一篇:【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总(附源码)(常用的css样式有哪些)

  • 爱奇艺微信会员可以几个人用(爱奇艺微信会员授权二维码在哪里)

    爱奇艺微信会员可以几个人用(爱奇艺微信会员授权二维码在哪里)

  • 微博怎么看指定人直播(微博怎么看指定地点的微博)

    微博怎么看指定人直播(微博怎么看指定地点的微博)

  • 佳能mp288警告灯亮(佳能MP288警告灯闪烁)

    佳能mp288警告灯亮(佳能MP288警告灯闪烁)

  • qq画画红包怎么识别(qq画画红包多来a梦)

    qq画画红包怎么识别(qq画画红包多来a梦)

  • 打开辅助触控还是没有小白点(辅助触控自己出来了)

    打开辅助触控还是没有小白点(辅助触控自己出来了)

  • 美团删除评价分会回升吗(美团评价删除评分会重新计算吗)

    美团删除评价分会回升吗(美团评价删除评分会重新计算吗)

  • 苹果xr广角镜头在哪(苹果xr广角镜头怎么设置)

    苹果xr广角镜头在哪(苹果xr广角镜头怎么设置)

  • 氦气硬盘和普通硬盘的区别(氦气硬盘和普通硬盘的尺寸)

    氦气硬盘和普通硬盘的区别(氦气硬盘和普通硬盘的尺寸)

  • 手柄是什么(手柄是什么接口)

    手柄是什么(手柄是什么接口)

  • word怎么删除不需要的部分(word怎么删除不可见内容)

    word怎么删除不需要的部分(word怎么删除不可见内容)

  • 网盘下载的视频在哪(网盘下载的视频怎么保存到本地)

    网盘下载的视频在哪(网盘下载的视频怎么保存到本地)

  • vivox9充电慢怎么解决(vivox9s充电慢)

    vivox9充电慢怎么解决(vivox9s充电慢)

  • 高帧率模式伤手机吗(高帧率模式伤手机屏幕吗)

    高帧率模式伤手机吗(高帧率模式伤手机屏幕吗)

  • 天猫v榜在哪看(淘宝天猫v榜入口)

    天猫v榜在哪看(淘宝天猫v榜入口)

  • 两个icloud合并了怎么取消(两个icloud合并了有什么影响)

    两个icloud合并了怎么取消(两个icloud合并了有什么影响)

  • 华为p30原装数据线多长(华为p30原装数据线图片)

    华为p30原装数据线多长(华为p30原装数据线图片)

  • 手机怎么拍红底照片(手机怎么拍红底免冠证件照)

    手机怎么拍红底照片(手机怎么拍红底免冠证件照)

  • 大光圈级别1 16怎么用(大光圈级别1~16怎么用)

    大光圈级别1 16怎么用(大光圈级别1~16怎么用)

  • 拼多多搜索不到店铺名(拼多多搜索不到自己的店铺是什么原因)

    拼多多搜索不到店铺名(拼多多搜索不到自己的店铺是什么原因)

  • 热拉退出还显示位置吗(热拉退出以后还显示在线吗)

    热拉退出还显示位置吗(热拉退出以后还显示在线吗)

  • 苹果计算器怎么看记录(苹果计算器怎么显示计算过程)

    苹果计算器怎么看记录(苹果计算器怎么显示计算过程)

  • 火狐浏览器如何清理缓存(火狐浏览器如何收藏网址)

    火狐浏览器如何清理缓存(火狐浏览器如何收藏网址)

  • appstore和itunes中被禁用(appstore和itunes中被禁用更新不到微信)

    appstore和itunes中被禁用(appstore和itunes中被禁用更新不到微信)

  • 绕过压缩包密码提取文件教程(如何绕开压缩包密码)

    绕过压缩包密码提取文件教程(如何绕开压缩包密码)

  • 在WIN7中,为什么

    在WIN7中,为什么"网络连接"图标消失?(win7为什么还有人用)

  • 建筑施工企业的分公司区域公司等较大的
  • 金税三期电子发票怎么领取
  • 盘亏的设备按正常报废处理是否符合会计制度要求
  • 手撕发票怎么领取需要什么证件
  • 现金预算表中的利息怎么算
  • 非独立核算的分公司怎么做账
  • 其他应收款里面有增值税
  • 建筑业3%人工费可以开专票吗?
  • 金税盘没有清卡可以开票吗
  • 非居民纳税人怎么纳税
  • 维修费属于哪个类别
  • 出纳汇错款会计怎么做账
  • 一般纳税人出售不动产增值税税率是多少
  • 民办非企业缴纳失业保险吗
  • 机会成本怎么计量
  • 印花税减免需要做账吗现在
  • 销售产品出去 怎么做科目
  • Win10待机唤醒后白屏怎么办
  • 员工租房管理规定
  • 金枝玉叶怎么养才爆盆
  • 租房交了押金
  • 劳务报酬可以扣除合理支出吗
  • 小程序生命周期钩子
  • 如何在vue项目中禁止谷歌浏览器改变网页颜色
  • ab1562a固件
  • pythonjson文件存储
  • 建材公司成本率一般多少
  • 结存成本怎么计算先进先出法
  • 如何查询上年企业所得税
  • 搜索站内内容
  • 有材料成本差异的材料入库会计分录
  • mysql查询并设置变量
  • 小规模纳税人都是3%吗
  • 费用计入什么表
  • 用友软件数据导出
  • 股本减少是利好吗
  • 财付通支付的优缺点
  • 赠送礼品怎么入账
  • 出口退税退的是哪些税
  • 职工教育经费调增
  • 小型微利企业减按25%计算应纳税所得额
  • 技术研发费用是什么意思
  • 一般什么是差旅费呢
  • 体检费可以开个人吗?
  • 本年利润为什么是负数
  • 发票金额小于实付金额会计分录
  • 公司为员工租房应注意
  • 小企业会计准则会计科目表
  • mysql基础概念
  • 怎样设置windows不更新
  • linux中sed详细用法
  • 班班通一直正在启动什么原因
  • xp注册表损坏怎么修复
  • 苹果mac使用
  • ibm svc是什么意思
  • windows xp的控制面板
  • awk结果输出到文件
  • scrnsave.exe
  • msg是啥
  • w10简易版
  • win10系统更新出错怎么办
  • win8如何禁止电脑自动安装软件
  • core文件的作用
  • 编写批处理运行程序
  • 不使用jsp
  • Node.js中的全局变量有哪些
  • ja开发
  • Ubuntu修改用户名
  • unity3d操作
  • beautiful python
  • 用python模拟用户登录
  • js对象用法
  • python内建函数 代码
  • django for
  • 对于初学者的鼓励
  • windows中的linux
  • jQuery插件使用
  • 车船税每年多少钱
  • 国考什么时候开始备考比较好
  • 普通发票开具时写材料一批需要附什么清单?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设