1.指定渐变背景的大小

.div {
background: url(../img/1.jpg);
/*background-size:contain;*/
width: 500px;
height: 100px;
} .divOne {
width: 100%;
height: 100%;
border: 1px solid red;
/*渐变,支持背景的大小和重复*/
background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
background-size: 100px 100px;
}

2.测试渐变背景的动画效果:

结果证明在动画中渐变背景会立刻改变。

.div {
background: url(../img/1.jpg);
/*background-size:contain;*/
width: 500px;
height: 100px;
} .divOne {
width: 100%;
height: 100%;
border: 1px solid red;
background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
transition: all linear 1s;
-webkit-transition: all linear 1s;
} .divOne:hover {
/*width:600px;*/
/*动画,对背景渐变不起作用*/
background: repeating-linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2));
}

3.仿照图片,实现背景的模糊化处理:

背景图:

.div {
width: 500px;
height: 100px;
background: url(../img/1.jpg) repeat;
background-size: contain;
margin-bottom: 20px;
position: relative;
} .divUp {
width: 100%;
height: 100%;
background: url(../img/bg_ie.png);
} .divUp2 {
width: 100%;
height: 100%;
background: repeating-linear-gradient(to right, rgba(191, 191, 191, 0.7),
rgba(145, 152, 174, 0.75),
rgba(163, 163, 163, 0.8));
background-size:650px auto;
} .mask {
width: 100%;
height: 100%;
background: #10141d;
opacity: 0.25;
position: absolute;
top: 0px;
left: 0px;
}

显示结果:

更多:

Css3渐变(Gradients)-径向渐变

CSS3渐变(Gradients)-线性渐变

Css3渐变实例Demo(一)的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例

    3 线性渐变实例 一.颜色从顶部向底部渐变 制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”:第二种方法起点参数设置为“top”:第三种起点参数使用“-90 ...

  2. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  3. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  4. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  5. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  6. CSS-3 渐变的使用

    CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡. 以前,您必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和 ...

  7. CSS3 渐变(Gradients)

    参考: http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必 ...

  8. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  9. CSS3:CSS3 渐变(Gradients)

    ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...

随机推荐

  1. shell的if判断

     shell的if判断 2012-03-16 14:53:05 分类: Python/Ruby   1 概要 有时候你需要指定shell脚本中的依靠命令的成功与否来实施不同过程的行为. if 结构允许 ...

  2. 2140: 稳定婚姻 - BZOJ

    Description 我国的离婚率连续7年上升,今年的头两季,平均每天有近5000对夫妇离婚,大城市的离婚率上升最快,有研究婚姻问题的专家认为,是与简化离婚手续有关. 25岁的姗姗和男友谈恋爱半年就 ...

  3. Android下载速度计算

    long startTime = System.currentTimeMillis(); // 开始下载时获取开始时间 long curTime = System.currentTimeMillis( ...

  4. atitit.ajax bp dwr 3.该票据安排使用的流量汇总 VO9o.....

    atitit.ajax bp dwr 3.该票据安排使用的流量汇总 VO9o..... 1. 安装配置 1 1.1. 下载  dwr.jar 1M 1 1.2. 配置注解方式..web.xml 1 2 ...

  5. 51Nod 欢乐手速场1 A Pinball[DP 线段树]

    Pinball xfause (命题人)   基准时间限制:1 秒 空间限制:262144 KB 分值: 20 Pinball的游戏界面由m+2行.n列组成.第一行在顶端.一个球会从第一行的某一列出发 ...

  6. android dp深度解析(转)

    我转载地方的连接:http://zhangkun716717-126-com.iteye.com/blog/1772696  当笔记记录一下 dip: device independent pixel ...

  7. 在混合开发框架模式中,简化客户端对Web API的频繁调用

    在混合开发框架模式中,有时候我们在处理树形节点的时候,需要很多关联的处理,可能需要结合用户配置信息,属性字典,以及表的字段分类等信息来展示一个结构树,那么在处理的时候就可能会频繁的对这些接口API进行 ...

  8. 使用Docker安装Oracle数据库

    在很多时候,我们需要在本地安装Oracle数据库,但是整个安装的过程时间非常长而且安装文件大,那么有不有更好的办法来安装Oracle数据库既能减少安装的时间而且还能够快速进行部署呢?答案就是使用Doc ...

  9. vue是一个渐进式的框架,如何理解“渐进式”

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式.使用vue,你可以在原有大系统的上面,把一两个组件改用它实现 ...

  10. caffe网络结构可视化在线工具

    http://ethereon.github.io/netscope/#/editor shift+enter