CSS3 background-image颜色渐变的实现代码


Posted in HTML / CSS onSeptember 13, 2018

linear-gradient 是CSS3中一个重要的属性,初看觉得很简单,但是别看它简单,它能实现很多复杂的图形。

CSS3 background-image颜色渐变的实现代码

代码还是比较简单的: linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),linear-gradient(115deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent)

但是理解起来还是需要一定基础的。

线性渐变 linear-gradient

基本用法

background-image: linear-gradient(red, yellow, blue, green); 
background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);

控制颜色渐变的方向(right, left, top, bottom)

/*
    控制颜色渐变的方向
    to right -- 从左向右
    to top -- 从下到上
    to left -- 从右到左
    to bottom --- 从上到下(默认值)
*/
background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);

控制颜色渐变的方向(deg)

/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);

控制颜色渐变的方向(to)

/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);

重复线性渐变:repeating-linear-gradient

background-image: linear-gradient(to right
, red 0
, red 50px
, yellow 50px
, yellow 100px
, red 100px
, red 150px
, yellow 150px
, yellow 200px);
/**与上面重复写渐变有相同的效果*/
background-image: repeating-linear-gradient(
        to right
        , red 0
        , red 50px
        , yellow 50px
        , yellow 100px
);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 #HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 #HTML / CSS
css3绘制百度的小度熊
Oct 29 #HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 #HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 #HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 #HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 #HTML / CSS
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
CSS常用网站布局实例
2008/04/03 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Django Highcharts制作图表
2016/08/27 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python字符串查找函数的用法详解
2019/07/08 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
python在协程中增加任务实例操作
2021/02/28 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
给女儿的表扬信
2014/01/18 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
大学入学感言
2015/08/01 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Pandas-DataFrame知识点汇总
2022/03/16 Python