正文

css渐变背景看这一篇就够了(代码片段)

浪漫主义码农  浪漫主义码农  2023-01-26  438

关键词：

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));

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
这几个网站是我常用的色彩渐变的网站。大家有什么好的网站评论区分享。

elasticsearch入门，看这一篇就够了(代码片段)

Elasticsearch入门，看这一篇就够了前言可视化工具kibanakibana的安装kibana配置kibana的启动Elasticsearch入门操作操作index创建index索引别名有什么用删除索引查询索引exist索引操作document插入document查询document删除document更新document使用... 查看详情

最全排序算法及优化，看这一篇就够了(代码片段)

最全排序算法总结看这一篇就够了没有经过总结的知识是沉重的，无用的瞧一瞧～博健的LeetCode题解：Gitbook版本传送门博健的LeetCode题解：CSDN传送门有趣的CSS：Gitbook传送门前端进阶笔记：Gitbook传送门目录... 查看详情

handler看这一篇就够了(代码片段)

Handler使用首先来熟悉一下Handler的四种使用方式，如果比较熟悉可以直接跳过：通过sendMessage消息机制来发送sendEmptyMessage(int);//发送一个空的消息sendMessage(Message);//发送消息，消息中可以携带参数sendMessageAtTime(Message,long... 查看详情

jquery框架超详细dom操作看这一篇就够了！(代码片段)

目录写在前面一、内容操作1.html()2.text()3.val()二、属性操作（1）通用属性操作1.attr():2.removeAttr()3.prop()4.removeProp()5.attr和prop区别（2）对class属性操作1.addClass()2.removeClass()3.toggleClass()4.css()三、查看详情

docker从入门到精通，看这一篇就够了(代码片段)

一、Docker简介1、背景物理机时代一个物理机上安装操作系统，然后直接运行我们的软件。也就是说你电脑上直接跑了一个软件，并没有开虚拟机什么的，资源极其浪费。缺点部署慢成本高虚拟机都不开，直接上物... 查看详情

☀️javanio?看这一篇就够了！!☀️(代码片段)

文章目录一、NIO简介1.1NIO概述1.2NIO&IO分析1.2.1IO操作流程1.2.2面向流与面向缓冲区1.2.3阻塞与非阻塞1.2.4.同步与异步二、Buffer基本应用2.1Buffer概述2.2Buffer基本应用三、Channel基本应用3.1Channel概述3.2FileChannel基本应用3.3SocketChanel基... 查看详情

☀️javanio?看这一篇就够了！!☀️(代码片段)

想要弄懂groupby看这一篇就够了(代码片段)

一、前言groupby关键字，不管是工作中还是面试都会经常被用到，所以弄懂它是非常有必要的。要弄懂groupby那我们就得联合着：聚合函数、groupby、having一块讲解。讲之前我们先准备一张表：二、聚合函数为了讲好groupby我们必须... 查看详情

逆转单向链表看这一篇就够了java(代码片段)

逆转单向链表逆转前:1->2->3->4->5->null逆转后:5->4->3->2->1->null个人博客地址：逆转单向链表方法一、循环迭代publicNodereverse(Nodehead)if(head==null||head.next==null)returnhead;//取前面节点Nodepre=head;//取后面查看详情

系统性的学会pandas看这一篇就够了(代码片段)

作者：MaSizhou https://blog.csdn.net/weixin_45901519/article/details/1129808221、Pandas数据结构2008年WesMcKinney开发出的库专门用于数据挖掘的开源python库以Numpy为基础，借力Numpy模块在计算方面性能高的优势基于matplotlib，能够简便的... 查看详情

redux从入门到进阶，看这一篇就够了！(代码片段)

Redux，带你从入门到进阶🌂序言☂️一、基础知识1、Redux概念简述2、Redux的工作流程🎃二、使用Antd实现TodoList页面布局1、在项目中使用Antd2、使用Antd实现TodoList的基本布局3、创建redux中的store（1）创建storeÿ... 查看详情

redux从入门到进阶，看这一篇就够了！(代码片段)

架构整洁之道,看这一篇就够了！(代码片段)

阿里妹导读：程序的世界飞速发展，今天所掌握的技能可能明年就过时了，但有些知识历久弥新，掌握了它们，你在程序的海洋中就不会迷路，架构思想就是这样的知识。本文是《架构整洁之道》的读书心得，作者将书中内容拆... 查看详情

关于el-upload看这一篇就够了(代码片段)

下述源码分析基于Elementv2.15.9版本前提在解析源码之前，先阐述其重点使用的两个基础内容：<inputtype="file">使用type=“file”的元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，... 查看详情

关于el-upload看这一篇就够了(代码片段)

mybatis基础应用，看这一篇就够了！(代码片段)

文字分享希望现在的你无论有明确具体的目标还是没有，都能重视自己的需求和目标，并且常常回顾，或许可以找一个你习惯的方式写出来，挂在哪里，电脑或日记本都好。当你疲惫或迷茫的时候拿出来看一... 查看详情

mix2适配看这一篇就够了，18:9只需一行代码(代码片段)

今天同事已经拿到MIX2了(F码通道，想要的可以找我哦)，但是app的状态栏适配不够好，空出很大一块出来。直接上代码<applicationandroid:resizeableActivity="true"></application>AndroidManifest.xml只需在AndroidManifest 查看详情

别再问我阿里面试流程了！！！面试阿里，看这一篇就够了！(代码片段)

背景大家好，我是只爱教妹学Java的秃头哥。对于想加入阿里的同学，或者想了解阿里面试流程（其实，很多公司，特别是BAT等大厂，有很多问题是相通的），一定不要错过本文。作为候选人，... 查看详情