CSS 渐变

CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型。

使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。用渐变代替图片，可以加快页面的载入时间、减小带宽占用。

同时，因为渐变是由浏览器直接生成的，渐变在页面缩放时的效果比图片更好，可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：

  • 线性渐变 (linear)，通过 linear-gradient 函数定义
  • 径向渐变 (radial)，通过 radial-gradient 函数定义

线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

linear-gradient函数的语法：

1
linear-gradient (方向或角度,颜色1,颜色2,...颜色n,背景图片)

其中背景图片是可选的。

下面的代码演示了线性渐变的用法。

<!DOCTYPE html>
<html>
    <head>
        <title>线性渐变</title>
        <style type="text/css">
            body{
                padding:20px;
            }
            div{color:#fff;}
            div.one{
                width:100%;
                height:150px;
                border:1px solid #000;
                background: linear-gradient(to bottom, blue, white);   
            }
            div.two{
                width:100%;
                height:150px;
                border:1px solid #000;
                background: linear-gradient(to right, blue, white);
            }  
            div.three{
                width:100%;
                height:150px;
                border:1px solid #000;
                background: linear-gradient(30deg, #000, #ff0000); 
            }
            div.four{
                width:100%;
                height:150px;
                border:1px solid #000;
                background: linear-gradient(to right, red, orange, yellow, green,white, blue); 
            }
            div.five{
                color:#000;
                width:418px;
                height:150px;
                border:1px solid #000;
                background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),
                url(https://www.liyongzhen.com/docs/images/css-flower.png);
            }              
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <div class="one">从上到下</div>
        <div class="two">从左到右</div>
        <div class="three">角度 30度</div>
        <div class="four">色标</div>
        <div class="five">背景图片渐变</div>
    </body>
</html>
 

计算结果：

色标，在渐变中，可以使用两种以上的颜色，这就是色标。

渐变加透明，效果更好，透明是通过背景颜色来实现，其中0是不透明，1是100%透明。

CSS 图像高级 CSS 渐变的更多相关文章

  1. CSS 图像高级 Css Sprites

    上节课中我们学习了背景图像,这节课我们学习背景图像的高级知识,如Css Sprites,CSS 背景渐变等. Css Sprites Css Sprites,国内也叫CSS精灵.它的原理是将许多的小图 ...

  2. CSS 图像高级 径向渐变

    径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...

  3. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  4. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  5. 《精通CSS：高级Web标准解决方案》学习笔记（上）

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  6. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  7. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  8. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  9. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

随机推荐

  1. win 8.1 Your PC needs to be repaired修复过程

    一.问题情况描述: 下班时,执行关闭系统命令,但硬盘灯一直亮着,因急着下班,所以直接长按电源键,装包回家... 到家后一段时间,启动电脑,但电脑蓝屏,提示“Your PC needs to be re ...

  2. 基于javaMail的邮件发送--excel作为附件

    基于JavaMail的Java邮件发送 Author xiuhong.chen@hand-china.com Desc 简单邮件发送 Date 2017/12/8 项目中需要根据物料资质的状况实时给用 ...

  3. 使用starUML画顺序图

    https://blog.csdn.net/gary0917/article/details/79968762

  4. 工控随笔_05_西门子_Step7软件仿真方法

    现在的PLC厂商提供的开发环境都具备仿真能力.无论是西门子.三菱.罗克韦尔还是ABB 或是其他一些厂商提供的产品都具有仿真功能. 仿真就是在没有硬件的情况下来测试程序功能,同时也为初学者提供了方便,即 ...

  5. HTML 块级元素 行内元素

    块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...

  6. SpringBoot启动源码探究---listeners.starting()

    1.首先调用starting()方法,其内部是一个对所有listener的starting()调用的for循环,然后每个listener调用另一个starting方法,其内部调用multicastEv ...

  7. catkin-make: command not found 错误解决

    参考网址:https://answers.ros.org/question/212492/catkin_make-command-not-found/ zc@ubuntu:~ $ source /op ...

  8. 基于墨刀实现的购物app

    在观察研究购物app后 仔细分析总结了几个基础功能,实现如下的界面: 主界面:购物app的推荐界面,提供各式的样品,将整个app的多种功能进行展示. 推荐分类:根据用户浏览的宝贝,对用户进行合理推荐. ...

  9. Linux下导入CA证书

    在部署路由器的时候,发现路由器不支持从https安装应用,经过调查,发现是路由器里面没导入证书 安装ca-certificates即可解决. opkg install ca-certificates

  10. hive 一次更新多个分区的数据

    类似订单数据之类的表,因为有状态要更新,比如订单状态,物流状态之类的, 这样就需要同步很久之前的数据,目前我的订单表是更新前面100天的数据. hive中操作是先删除前面100个分区的数据,然后重新动 ...