6年不研究CSS发现很多现功能都没有用过,例如渐变色,弹性盒子等,年前做过一个简单的管理系统,由于本人美工不好,设计不出好看的背景图片,偶然百度到背景图片可以使用渐变色(感觉发现了新大陆)。以后的项目中也用过几次,每次都要百度,这里系统学习一下,并记下笔记,方便下次复习。

  (1)双色渐变,默认方向是向下的效果如下图

      background-image: linear-gradient(green,white);

(2)可以通过关键字 to right,to left ,to bottom ,to top 改变渐变方向,也可以根据角度改变(0-360度);

   

    (3)多色渐变 ,效果如下图

    background-image: linear-gradient(to right,green,yellow,white);  
      background-image: linear-gradient(45deg,green,yellow,grey);
      background-image: linear-gradient(135deg,green,yellow,grey);

    

(4) 指定渐变的尺寸(位置),(方向,颜色1    尺寸1,颜色 2 尺寸2,...,颜色n  尺寸 n)

         background-image: linear-gradient(135deg,green 10%,yellow 40%,grey 80%);

    解释:百分比代表的是开始的位置,上述命令的解释为:向135度方向渐变,10% 之前为 纯绿色,10% 到 40% 为 绿到黄渐变,40% 到 80% 为黄到灰渐变,80%以后为纯 灰色。

(5)重复渐变:repeating-linear-gradient,重复的是渐变色,如果不是渐变则不会重复,例如 :

             repeating-linear-gradient(0deg,red 15px,white 15px);  //不存在渐变,因为15像素之前是纯红色,15像素之后为纯白色,因为两种颜色的开始位置重合了,也就是渐变的像素距离为0,效果如下图

             background-image: repeating-linear-gradient(0deg,red 15px,white 80px);    两种三颜色渐变的起始位置有像素差,存在渐变,也可以重复,效果如下

            

(6) 相等的颜色也可以渐变,顾等色也可以重复渐变,有了这个理论,我们就可以做相间条纹图案;

               background-image: repeating-linear-gradient(-50deg,red 0px,red 15px,white 15px,white 30px,blue 30px,blue 45px,white 45px,white 60px);
解释0-15 红色到红色的渐变,15-30 白色到白色的家变,30-45 蓝色到蓝色渐变,45-60 白色到白色渐变;加上重复渐变和角度,效果如下图。

    

css 3 背景图片为渐变色(渐变色背景图片) 学习笔记的更多相关文章

  1. 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ...

  2. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  3. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  4. css让图片作为按钮的背景并且大小合适

    最近在做ASP大作业,在做html页面的时候想把一个图片作为按钮的背景,搞了好久终于在csdn上找到了满意的答案: background-size: cover; 只需要这一句就ok了,就是这么简答. ...

  5. [Swift通天遁地]五、高级扩展-(5)获取互补色、渐变色、以及图片主题颜色

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  7. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  8. HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  10. CSS学习笔记11 CSS背景

    background-color:背景色 前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color ...

随机推荐

  1. 写给Android 混淆小白的快速混淆方法

    为啥子要混淆 简单来说,Android 进行ProGuard,可以起到压缩,混淆,预检,优化的功能,虽然不能说更安全但还是一个不容忽视的环节. 开始混淆第一步 首先在build.gradle 中将混淆 ...

  2. javaweb系统调优方案

    1. java代码优化 java代码优化6大原则 : https://blog.csdn.net/bunny1024/article/details/72803708 java代码优化: https: ...

  3. [转载] IE8+兼容小结

    本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...

  4. ELK+kafka日志收集分析系统

    环境: 服务器IP 软件 版本 192.168.0.156 zookeeper+kafka zk:3.4.14  kafka:2.11-2.2.0 192.168.0.42 zookeeper+kaf ...

  5. libevent(十三)evhttp事件处理流程

    在libevent(六)http server中,作为一个单线程http server,不仅要监听每个连接的到来,还要监听每个连接上的I/O事件. 查看源码可知,在evhttp_bind_socket ...

  6. JAVA设计模式之工厂系列(factory)

    任何可以产生对象的方法或者类,都可以称之为工厂.单例就是所谓的静态工厂. 为什么jdk中有了new,还需要工厂呢? a.灵活的控制生产过程 b.给对象加修饰.或者给对象加访问权限,或者能够在对象生产过 ...

  7. STL库中神奇函数nth_element

    用法:nth_element(数组名,数组名+第k小元素,数组名+元素个数) 这个函数主要用来将数组元素中第k小的整数排出来并在数组中就位,随时调用. 例如: ]={,,,,},k ; cin> ...

  8. tomcat 8.5 及其 9.0 response写cookie 设置damain为 [.test.com] 出错 An invalid domain [.test.com] was specified for this cookie

    抛出异常: java.lang.IllegalArgumentException: An invalid domain [.test.com] was specified for this cooki ...

  9. java ->网络通信协议(UDP协议、TCP协议)

    网络通信协议 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网络中,这些连接和通信的规 ...

  10. Win32 Sdk 连接Access数据库

    /************************************************************* *** MyWinClass.cpp 创建窗口模板 *** vs2017+ ...