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属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 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个人网站架设连环讲(三)
2006/10/09 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
百度地图API使用方法详解
2015/08/25 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
python发腾讯微博代码分享
2014/01/10 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python中requests小技巧
2017/05/10 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
商品陈列协议书
2014/09/29 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
党员示范岗材料
2014/12/19 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
python playwright之元素定位示例详解
2022/07/23 Python