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实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 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调用三种数据库的方法(3)
2006/10/09 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
php自定义分页类完整实例
2015/12/25 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
js读写json文件实例代码
2014/10/21 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python中的Cookie模块如何使用
2020/06/04 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
任命书怎么写
2014/06/04 职场文书
好的促销活动方案
2014/08/21 职场文书
交通工程专业推荐信
2014/09/06 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Oracle中DBLink的详细介绍
2022/04/29 Oracle