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. Ubuntu14.04下 安装p4c

    参考: Github p4c README Ubuntu14.04下 安装p4c 这里提供一个直接安装p4c的脚本:install_p4c.sh. 1.git clone下来p4c: $ git cl ...

  2. 操作 frames 框架下的 dom 内容。

    2016-12-30 框架名: var obj=$(window.frames["wangpan"].document).find("a[menu=download_on ...

  3. Bootstrap 固定导航条

    默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动而消失.也可以改变它的定位方式,让它固定显示在浏览器窗口的顶部或底部. 1.固定在顶部 如果 ...

  4. python 传递多个参数

    def oper(a,*args): print(args) print(a) oper("q","s","d","z" ...

  5. Ubuntu18.04的网络配置

    网卡与DNS配置 1)打开命令窗口(右键单机桌面选择Open Terminal或者用快捷键Ctrl+Alt+T打开终端),输入ip a查看自己的网卡编号 2)输入命令sudo vim /etc/net ...

  6. How Many O's? UVA - 11038

    这个题个人感觉有点难,不容易理解. 题意 给你两个数,n,m,找出从n到m所有的数一共包含几个0,看似简单,包含0的不就都是整数么,然后就用暴力循环来找,绝对TL.我自己写这题也没有什么好的办法,没有 ...

  7. Transactional cannot be resolved to a type

    SpringBoot整合Mybatis时遇到“ Transactional cannot be resolved to a type ” ,以为是没有导入相应的包 “ import org.sprin ...

  8. DAY5 基本数据类型及内置方法

    一.可变与不可变数据类型 1.可变类型:值改变,但是id不变,证明就是在改变原值,是可变类型 2.不可变类型:值改变,但是id也跟着变,证明是产生了新的值,是不可变类型 二.数字类型 1.整型int ...

  9. layui 日期插件onchange事件失效的方法

    laydate.render({ elem:'#text1',//制定元素 type:'date', //range:true,//开启左右面板 min:'2017-09-1',// max:'201 ...

  10. json包

    1.官网下载 2.pom文件下载: <dependency> <groupId>net.sf.json-lib</groupId> <artifactId&g ...