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. 【转载】C++宏定义详解

    摘自:http://blog.chinaunix.net/uid-21372424-id-119797.html   C++宏定义详解 2011-02-14 23:33:24   分类: C/C++ ...

  2. 17秋 SDN课程 第一次作业

    SDN第一次作业 你会选择作 网络编程 方向的程序员吗?为什么? 有可能.原因如下: 1.我的研究与网络密切相关: 2.SDN侧重软件实现,自然涉及socket等网络编程知识,属于基本功: 3.市场. ...

  3. 草珊瑚理解IFC(inline formatting context)

    1. 认识字体font-family 字体渲染的实际高度, 由字体本身的设置(升部ascender,降部descender,大写字母高度Capital Height,小写字母高度X-Height等等) ...

  4. 基于 Python 和 Pandas 的数据分析(4) --- 建立数据集

    这一节我想对使用 Python 和 Pandas 的数据分析做一些扩展. 假设我们是亿万富翁, 我们会想要多元化地进行投资, 比如股票, 分红, 金融市场等, 那么现在我们要聚焦房地产市场, 做一些这 ...

  5. Codeforces 776E The Holmes Children

    题目链接:http://codeforces.com/problemset/problem/776/E ${\because gcd(i,n-i)=1\Leftrightarrow gcd(i,n)= ...

  6. Easyui使用心得(1)--DateGrid表格

    最近一直在用easyui这个控件,有一点心得,在这里和大家分享一下,也是对自己工作的一个小小的总结,希望可以形成一个完整的Easyui的笔记体系,可以方便更多的人 因为自己也是在摸索中前进,难免有遗漏 ...

  7. PL/SQL Developer安装配置

    选择tool下的perferences 修改下面标记的内容即可

  8. vuex学习与实践——mapState、getter、mapGetters

    1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...

  9. JNI C创建Java字符串数组

    创建Java字符串数组 注:jni中没有与String[]对应的数据类型,所以需要创建对象数组,循环添加jstring对象 #include <Sample3.h> #include &l ...

  10. d3 .each()

    d3.select("xxx") .each(function (d) { //this表示当前element 而 d表示绑定的数据 something(this); }); 注意 ...