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));
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
这几个网站是我常用的色彩渐变的网站。大家有什么好的网站评论区分享。
CSS渐变背景看这一篇就够了相关推荐
- CSS盒子模型——看这一篇就够了
欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端. 致力于尽可能详细且简洁的介绍前端知识.自己的捷径,也是学习路上的记录.欢迎探讨 目录 一.C ...
- api网关选型_如何轻松打造百亿流量API网关?看这一篇就够了(下)
如何轻松打造百亿流量API网关?看这一篇就够了(上) 上篇整体描述了网关的背景,涉及职能.分类.定位环节,本篇进入本文的重点,将会具体谈下百亿级流量API网关的演进过程. 准备好瓜子花生小板凳开始积累 ...
- Vue使用Swiper看这一篇就够了
Vue使用Swiper看这一篇就够了 此案例实现需求 完成swiper动态异步数据下的slide渲染 自定义分页器样式 解决loop:true设置时的事件丢失问题 swiper鼠标移入/移出 暂停/开 ...
- 2019-5-25-win10-uwp-win2d-入门-看这一篇就够了
title author date CreateTime categories win10 uwp win2d 入门 看这一篇就够了 lindexi 2019-5-25 20:0:52 +0800 2 ...
- 聊聊Java8之后的JDK升级内容(看这一篇就够了)
聊聊Java8之后的JDK升级内容(看这一篇就够了) 背景 从 JDK 8 到 JDK 17 的新特性 JDK8 回顾 JDK9 JDK10 JDK11 JDK12 JDK13 JDK14 JDK15 ...
- 【系统架构设计师】软考高级职称,一次通过,倾尽所有,看完这篇就够了,方法和技巧这里全都有。
目录 背景 报考条件 通过率 考试时间要求 系统架构设计师考试内容 证书的价值 备考建议 报班&自学 分享下我的自学方法 必胜法宝 分享我考试的心态 [系统架构设计师]软考高级职称,一次通过, ...
- 技术交底书怎么撰写?看这一篇就够了
文章目录 技术交底书怎么撰写?看这一篇就够了 专利技术交底书格式 1. 发明(或实用新型 以下同)的名称 2. 技术领域 3. 背景技术 4. 发明内容 5. 附图说明 6. 具体实施方式 技术交底书 ...
- python装饰器功能是冒泡排序怎么做_传说中Python最难理解的点|看这完篇就够了(装饰器)...
https://mp.weixin.qq.com/s/B6pEZLrayqzJfMtLqiAfpQ 1.什么是装饰器 网上有人是这么评价装饰器的,我觉得写的很有趣,比喻的很形象 每个人都有的内裤主要是 ...
- serviceloader java_【java编程】ServiceLoader使用看这一篇就够了
转载:https://www.jianshu.com/p/7601ba434ff4 想必大家多多少少听过spi,具体的解释我就不多说了.但是它具体是怎么实现的呢?它的原理是什么呢?下面我就围绕这两个问 ...
- docker 删除所有镜像_关于 Docker 镜像的操作,看完这篇就够啦 !(下)| 文末福利...
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...
最新文章
- 计算机基础-计算机硬件
- mysql ERROR 1042 (HY000): Can't get hostname for your address
- mcq 队列_MCQ | 量子密码学
- Python 中argparse模块的使用
- typename的双重语义
- Android 系统(185)---如何使用adb command来设置cpu频率和核数
- 案例:演示pageContext对象的使用及源码分析获取属性方法
- python和台达plc通讯_台达PLC通信协议ModbusASCIIDVP
- 在一个字符串中找到第一个只出现一次的字符。
- 必学:入行电商产品经理必备知识,原来这么简单
- 路由器04--OPKG
- [HNOI 2015]落忆枫音
- Java图形化界面编程之——Swing
- 房东家的网线不用账号和密码就能上网怎么设置路由器
- OsmocomBB SMS Sniffer
- cloud-utils
- 光流传感器 定位精度_基于光流传感器的移动机器人定位方法
- 01-EMC设计规范
- java jisuan da xie zi mu ge shu_Java 实现汉字转换为拼音的实例
- 已知圆上的三个点求此圆的周长
热门文章
- sofa接口下载文件
- SAP入行须知 | SAP项目管理(PS模块)概述 |大连易拓SAP
- 求到达必败态的方法数 ZOJ 3067 Nim
- vue-router升级3.0.0以上版本导致Uncaught(in promise) navigation guard报错问题
- 战争调度(动态规划、记忆化搜索)
- 计算机组成原理重点考试范围,计算机组成原理重点整理(白中英版) 考试必备
- 输入若干个字符串,查找其中的最大字母,在该字母后面插入字符串“(max)”
- 团队任务5:事后诸葛亮会议
- 团队项目事后诸葛亮会议
- halcon自动对焦