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. [BZOJ 1011] [HNOI2008] 遥远的行星 【近似解】

    题目链接: BZOJ - 1011 题目分析 这道题的特别之处在于,答案可以有5%的误差. 嗯..So? 我还是不会,于是看题解. 神犇的题解就是利用这误差范围求一个近似解. 怎么求近似解呢?假如 g ...

  2. Android程序的隐藏与退出

    转自Android程序的隐藏与退出 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Destroy()方法来销毁当前Activit ...

  3. Python 处理EXCEL的CSV文档分列求SUM

    相对于导出EXCEL文件,PYTHON计算更为实时. import csv import sys from optparse import OptionParser def calculate_pro ...

  4. Java实现字符串反转

    替换原则:index k 的值和 n-k 的值进行交换.(始终记住程序员的n.k都是字符串的实际位置.) 乘除的最基本实现还是来源于移位操作. public String reverse(String ...

  5. Erlang安装简介

    什么是 Erlang? Erlang 由 Ericsson (爱立信公司)开发,用于帮助开发管理许多电信项目的软件.Erlang 的第一个版本发布于 1986 年,1998 年发布了它的第一个开放源码 ...

  6. bzoj3124

    很好的一道treedp,当然也挺烦的首先不难想到先求出一个直径,然后穷举每条边,看他删除之后直径大小是否会变,变了的话就是必须经过的边下面我们就要想怎么优化,本人语言表达略差,还是配合程序说吧. ty ...

  7. 把这两天遇到的码(e)农(xin)题记下来

    1019: [SHOI2008]汉诺塔 1858: [Scoi2010]序列操作 1058: [ZJOI2007]报表统计

  8. 【转】更新SDK后,打包APK时报 the zipalign tool was not found in the sdk

    原文网址:http://wyong.blog.51cto.com/1115465/1546632 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任 ...

  9. UCloud EIP 你真的懂得如何使用么? - SegmentFault

    UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?

  10. The breakpoint will not currently be hit. vs2005断点不被命中

    用会了vs2005但是发现坑爹的连断点都不会命中,原来是默认设置的问题.要使断点命中: 1. 首先确保程序是在DEBUG模式下运行: 2. 确认正确的项目设置:链接器->调试->生成调试信 ...