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语言调用Python 混合编程

    导语 Python有很多库,Qt用来编写界面,自然产生C++调用Python的需求.一路摸索,充满艰辛 添加头文件搜索路径,导入静态库 我的python头文件搜索路径:C:\Python27amd64 ...

  2. Execl矩阵如何转化成Pajek的net文件

    在科研中我们有时会把把execl矩阵利用Ucinet.Pajek等可视化软件进行画图,而想要把execl矩阵转化为 Pajek可识别的文件-->net文件令很多初学者头疼不已,本文将做详细介绍. ...

  3. 【Mac】Finder显示或隐藏文件

    第一步:打开「终端」应用程序. 第二步:输入如下命令: defaults write com.apple.finder AppleShowAllFiles -boolean true ; killal ...

  4. intellij idea 破解教程

    首先呼吁:抵制盗版,抵制盗版,抵制盗版 如果只是个人开发学习用,那么下面的教程可能比较适合你了 有两种方法,第一种:Activate--License server,在License server a ...

  5. 关于Tortoise git汉化包装了,不管用,仍然是英文菜单的问题记录

    今天在装小乌龟(TortoiseGIT)碰到了安装中文语言包不管用的情况,后来在几番折腾之后总算搞定了,但是具体哪一步搞定的,目前原因还不清楚,所以把搞定的过程记录下,留作后用: 1.Tortoise ...

  6. socket之基础

    链接https://www.cnblogs.com/clschao/articles/9593164.html

  7. 详细解说Tomcat 设置虚拟路径的几种方法及为什么设置虚拟路径

    说明:此次使用的是Tomcat 7.0 很多朋友都会很疑惑,既然我们都知道在Tomcat服务器上部署项目只要将项目打包,然后放到webapps目录下就可以了,为什么还需要配置虚拟路径?的确,把项目放到 ...

  8. 3.git、TortoiseGit的安装、仓库的配置教程

    参考:https://blog.csdn.net/hc_ttxs/article/details/79375788 引言: Git: 就是最原始的分布式版本控制系统,是开源的. GitHub:与Git ...

  9. IIS7 配置Http重定向到Https

    1.注意首先要安装url重定向模块 微软官方地址:https://www.microsoft.com/zh-CN/download/details.aspx?id=7435 百度网盘地址:链接: ht ...

  10. javaSE习题 第一章 JAVA语言概述

    转眼就开学了,正式在学校学习SE部分,由于暑假放视频过了一遍,略感觉轻松,今天开始,博客将会记录我的课本习题,主要以文字和代码的形式展现,一是把SE基础加强一下,二是课本中有很多知识是视频中没有的,做 ...