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. QT中QLineEdit的editingFinished()信号在按下回车时会触发两次的解决办法

    class MyLineEdit : public QLineEdit { Q_OBJECT public: MyLineEdit(QWidget * parent = 0) : QLineEdit( ...

  2. JsonKey小写

    System.Text.RegularExpressions.MatchCollection ms = System.Text.RegularExpressions.Regex.Matches(eca ...

  3. unity3d 加载优化建议 总结 from 侑虎科技

    第一部分 我们对于纹理资源的加载建议如下: 1.严格控制RGBA32和ARGB32纹理的使用,在保证视觉效果的前提下,尽可能采用“够用就好”的原则,降低纹理资源的分辨率,以及使用硬件支持的纹理格式. ...

  4. input标签让光标不出现

    <input  class="red" readonly unselectable="on" > input点击变为搜索框,用form包住绑定搜索事 ...

  5. 添加删除tag

    为某个分支打tag git tag -a v1. 9fceb02 删除tag git tag -d test_tag git push origin --delete tag test_tag 推送: ...

  6. python3 items() 与 python2 中iteritems()的区别

    在Python2.x中, iteritems() 用于返回本身字典列表操作后的迭代 Python 3.x 里面, iteritems() 方法已经废除了,而 items() 得到的结果是和 2.x 里 ...

  7. Servlet中web.xml的配置

    引言:这是一个采用原生Servlet开发的项目的一个简要配置,在这里记录一下,以便以后用到了 可以直接copy,如又侵权,请联系本博主. <?xml version="1.0" ...

  8. gc调优我们到底在调整什么

    java开发一般都会涉及到jvm调优其中gc调优是个重点项.那gc调优调整的究竟是什么呢准确来说是业务.下面围绕这个话题展开 起因 为什么说是业务呢得从cc++开始说起如果说是用c/c++做开发运行的 ...

  9. 关于Java类和包的那些事

    *.Java文件 问题:一个.java源文件中是否可以包括多个类(不是内部类)?有什么限制? 答案:可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致.一个文件中可以 ...

  10. MySQL学习(十一)

    MySQL的函数 1 数学函数 2 字符串函数 3 日期和时间函数 4 条件判断函数 5 系统信息函数 6 加密解密函数 7 其他函数 2 字符串函数 length计算的是字节长度 char_leng ...