CSS渐变背景详细教程

作者:南国老符 分类:知识技术 浏览:228 日期:2022-05-10 来源: 建站管家


这几个网站是我常用的色彩渐变的网站:
渐变颜色:http://color.oulu.me/
CoolHue 2.0:https://webkul.github.io/coolhue/
uigradients:https://uigradients.com/#Lunada

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



这就是就是背景渐变的全部内容了。

本文摘自:https://blog.csdn.net/Mq_sir/article/details/121053167  ,作者:浪漫主义码农


本站部分信息来源网络,由于作者无法考证等因素,未注明出处,如有侵权,请联系删除。

上一篇: 《建站管家》二次开发文档

下一篇: 让bootstrap分页pagination居中的解决方法


发表评论
昵称 (必填)
邮箱
网址
评论 (0)
QQ客服
客服微信
加QQ群