css 渐变背景_照片背景换成蓝色渐变

css 渐变背景_照片背景换成蓝色渐变CSS渐变背景看这一篇就够了在我们自己设计网页的时候,为了好看美观,颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景,和一些常用的颜色网站。CSS渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩,看能玩出什么花来。CSS定义了两种渐变类型:一、线性渐变(向下/向上/向左/向右/对角线)我们通过属性linear-gradient来这样定义一个线性渐变。background-image:linear-gradient(方向

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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

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

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

CSS 定义了两种渐变类型:

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

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

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

Jetbrains全家桶1年46,售后保障稳定

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/200754.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • eclipse 安装svn插件 maven插件 web插件 erm插件

    eclipse 安装svn插件 maven插件 web插件 erm插件eclipse 安装svn插件 maven插件 web插件 erm插件

  • html图片自适应div大小_未知宽高的div元素垂直水平居中

    html图片自适应div大小_未知宽高的div元素垂直水平居中1.设置label的html图片-(NSMutableAttributedString*)setAttributedString:(NSString*)str{//如果有换行,把\n替换成<br/>//如果有需要把换行加上str=[strstringByReplacingOccurrencesOfString:@”\n”withString:@”<br/>”];//设置HTML图片的宽度str=[NSString

  • sqlserver快速删除大批量数据_sqlserver删除数据

    sqlserver快速删除大批量数据_sqlserver删除数据如何使用dropdownlist绑定数据库?首先我们要了解一些dropdownlist的一些属性。DataSource:为数据源DataBind:数据源绑定DataTextField:要显示的文本值DataValueField:显示文本值的编号其中DataTextField主要是给用户看的,我们程序员要用的是DataValueField。下面是代码展示:这里我就建立了一个部门表插入了三条数据:gocreatetableDepartment(DepI

  • SCI期刊Cover Letter写法模板

    SCI期刊Cover Letter写法模板一、写法投稿信(CoverLetter)应该简述所投稿件的核心内容、主要发现和意义,拟投期刊,对稿件处理有无特殊要求等(如“nottoreview”list)。另外,请附上主要作者的中文姓名、通讯地址、电话、传真和e-mail地址。此外有的杂志要求推荐几位审稿人及其联系方式。以及谁已经阅读过该文(当然是牛人)。一般来说,杂志通常要求说明你论文研究的意义,以及与这个杂志的相关性,另外还…

  • pycharm2021.11永久激活【中文破解版】

    (pycharm2021.11永久激活)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1M3Q9SD5XW-eyJsaWN…

  • python常见运维脚本_Python运维常用脚本[通俗易懂]

    python常见运维脚本_Python运维常用脚本[通俗易懂]一、清除指定redis缓存#!/usr/bin/envpython3importredis#选择连接的数据库db=input(‘输入数据库:’)r=redis.Redis(host=‘127.0.0.1’,port=6379,db=0)#输入要匹配的键名id=input(‘请输入要执匹配的字段:’)arg=‘’+id+’’n=r.keys(arg)#查看匹配到键值f…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号