CSS3透明背景+渐变样式

转载自博文:《CSS3透明背景+渐变样式》 http://blog.csdn.net/netbug_nb/article/details/44343809
效果:

核心代码如下:

  1. .map-interview {
  2. background-image:-webkit-linear-gradient(
  3. to right,
  4. rgba(0,0,0,0) 0%,
  5. rgba(0,0,0,0.4) 5%,
  6. rgba(0,0,0,0.6) 10%,
  7. rgba(0,0,0,0.6) 90%,
  8. rgba(0,0,0,0.4) 95%,
  9. rgba(0,0,0,0) 100%);
  10. background-image: linear-gradient(
  11. to right,
  12. rgba(0,0,0,0) 0%,
  13. rgba(0,0,0,0.4) 5%,
  14. rgba(0,0,0,0.6) 10%,
  15. rgba(0,0,0,0.6) 90%,
  16. rgba(0,0,0,0.4) 95%,
  17. rgba(0,0,0,0) 100%);
  18. height: 220px;
  19. left: 50%;
  20. margin-left: -350px;
  21. margin-top: -110px;
  22. padding: 10px 0px 10px 30px;
  23. position: absolute;
  24. top: 30%;
  25. width: 700px;
  26. border: 1px solid rgba(0, 0, 0, 0.1);
  27. }

CSS3透明背景+渐变样式的更多相关文章

  1. 关于css3的背景渐变

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

  2. 笔记 : CSS3实现背景渐变过渡

    使用CSS3的人都知道背景background-image是可以线性渐变(linear-gradient)和径向渐变(radial-gradient),但是想要做到过渡动画,单纯的background ...

  3. CSS3利用背景渐变和background-size配合完成渐变与条纹效果[持续更新中...]

    1.不等垂直条纹. <!-- 不等垂直条纹 --> <div class="div1"></div>div1 div{ width: 200px ...

  4. css3实现背景渐变

    #grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 ...

  5. CSS3透明背景表单

    在线演示 本地下载

  6. CSS3背景渐变。。。

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  7. CSS3魔法堂:背景渐变(Gradient)

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  8. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

  9. CSS3实现背景透明文字不透明

    最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...

随机推荐

  1. PTA 根据后序和中序遍历输出先序遍历(25 分)

    7-1 根据后序和中序遍历输出先序遍历(25 分) 本题要求根据给定的一棵二叉树的后序遍历和中序遍历结果,输出该树的先序遍历结果. 输入格式: 第一行给出正整数N(≤30),是树中结点的个数.随后两行 ...

  2. _event_worldstate

    EventId 事件ID ID WorldStateUI.dbc第10列数字部分 StartValue 起始值 Entry 更新世界状态需要击杀生物或摧毁物体的entry,正数为生物,负数为物体 St ...

  3. Codeforces 781C Underground Lab

    题目链接:http://codeforces.com/problemset/problem/781/C 因为有${K}$个机器人,每个又可以走${\left \lceil \frac{2n}{k} \ ...

  4. "ProgrammerHome"项目笔记

    系统目的: 1.技术练习:把平时不用的,重要技术栈,在此项目中打磨(java.python.算法.系统构架) 2.新技术(工具)应用:有些平时想做,想实现的技术,可以在这里实现.而且以微服务的方式,轻 ...

  5. git 命令 clone分支的代码

    一个项目通常含有很多分支, master分支一般是经过测试,验证没有问题后,代码才会提交到master分支 develop分支,是测试经常拉下来进行测试的分支 直接复制develop分支的git 命令 ...

  6. sql 查询字段是中文/英文/数字 正则表达式

    一.包含中文字符 select * from 表名 where 列名 like '%[吖-座]%' 二.包含英文字符 select * from 表名 where 列名 like '%[a-z]%' ...

  7. .NET 使用中文编码

    在.Net Core中默认System.Text中不支持CodePagesEncodingProvider.Instance, System.Text.Encoding.CodePages.dll允许 ...

  8. Python 3种运行方式

    Python 命令行 >>>print('Hello World!') 小程序 在hello.py中写入如下,并保存: print('Hello World!') $python h ...

  9. django 配置 Django

    Django项目的设置文件位于项目同名目录下,名叫settings.py.这个模块,集合了整个项目方方面面的设置属性,是项目启动和提供服务的根本保证. 一.简述 settings.py文件本质上是一个 ...

  10. 内连接查询输出到datagridView

    实现步骤: 1. 新建两张对应表的类 例如: 第一张表对应的类 { class ManagerInfo { public Table1 group { get; set; } //重点 需要内连接的字 ...