.linear {
width: 630px;
height: 120px;
line-height: 150px;
text-align: center;
font-size: 26px;
position: absolute;
bottom: 0;
color: #fff;
background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.2) ); /* Safari 5.1 - 6 */
background: -o-linear-gradient(bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.2)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /* Firefox 3.6 - 15*/
background: linear-gradient(to bottom,rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /* 标准的语法 */
}

css3颜色+透明度渐变的更多相关文章

  1. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  2. Android之绚丽的图片游览效果--有点像W7效果,透明的倒影,层叠的图片,渐变的颜色透明度

    这里转载一个牛人的博客:http://www.cnblogs.com/tankaixiong/archive/2011/02/24/1964340.html 下面,是我参照他的博客实现的一个效果图.这 ...

  3. 关于css3的背景渐变

    关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内 ...

  4. SVG颜色、渐变和填充

    颜色 RGB和HSL都是CSS3支持的颜色表示方法,一般普遍使用是RGB.PS:HSL浏览器兼容. RGB RGB即是代表红.绿.蓝三个通道的颜色,通过对红(R).绿(G).蓝(B)三个颜色通道的变化 ...

  5. CSS3颜色特征温故

    网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...

  6. CSS3 Gradients(渐变)

    CSS3 Gradients(渐变) 一.简介 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...

  7. css3中的渐变小总结

      = 导航   顶部 线性渐变 径向渐变 透明度 边框 阴影   顶部 线性渐变 径向渐变 透明度 边框 阴影 系列教程 CSS3 Gradient分为linear-gradient(线性渐变)和r ...

  8. CSS3之线性渐变(linear gradients)

    线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...

  9. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

随机推荐

  1. LeetCode Top 100 Liked Questions in Golang(updating...)

    leetcode go语言版本,主要为了熟悉下语言 1. Two Sum 双指针版本, O(NlogN) func twoSum(nums []int, target int) []int { val ...

  2. laravel 图片上传 intervention/image

    1. composer require intervention/image 2). 修改 app/config/app.php 添加 ServiceProvider: // 将下面代码添加到 pro ...

  3. 【JZOJ4812】【NOIP2016提高A组五校联考2】string

    题目描述 给出一个长度为n, 由小写英文字母组成的字符串S, 求在所有由小写英文字母组成且长度为n 且恰好有k 位与S 不同的字符串中,给定字符串T 按照字典序排在第几位. 由于答案可能很大,模10^ ...

  4. PLAY2.6-SCALA(七) Streaming HTTP response

    1.从HTTP1.1开始,服务端为了在single connection下对HTTP请求及响应提供服务,需要在response中提供响应的Content-Length. 默认情况下,不需要显示的指明C ...

  5. Hdu 4810

    2014-05-02 15:53:50 题目连接 2013年南京现场赛的题目,现场的时候,排在我们前面的队伍基本都过了这题,我们后面的队伍也有不少过了这题,唯独我们没有.. 后来是Qingyu Sha ...

  6. this的作用

    1.在一般函数方法中使用 this 指代全局  function test(){ this.x = 1; alert(this.x);  }  test(); // 1 2.作为对象方法调用,this ...

  7. 【Leetcode链表】回文链表(234)

    题目 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否用 O(n) ...

  8. SGU 101 Domino【欧拉路径】

    题目链接: http://acm.sgu.ru/problem.php?contest=0&problem=101 题意: N个多米诺骨牌,每个骨牌左右两侧分别有一个0~6的整数(骨牌可以旋转 ...

  9. 开发者必知的8款App快速开发工具开发者必知的8款App快速开发工具

    "我有一个好创意,就差一个CTO……" "原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了." "APP版本迭代更新,都是企业的一道难关 ...

  10. @topcoder - 2017TCOAlgorithmRound2A - D1L2@ DistanceZeroAndOne

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 一个 n 个点的无向简单的连通图,编号从 0 到 n-1. 现给 ...