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. 【译】第19节---数据注解-NotMapped

    原文:http://www.entityframeworktutorial.net/code-first/notmapped-dataannotations-attribute-in-code-fir ...

  2. Python: find the smallest and largest value

    题目要求: Write a program that repeatedly prompts a user for integer numbers until the user enters 'done ...

  3. Android 使alertDialog.builder不会点击外面和按返回键消失

    这个问题之前一直困扰我,我的需求就是点击对话框外面和按返回键对话框不会消失,按返回键还好解决,拦截下返回键就OK了. 但是点击外面不好解决.之前有人说模态对话框,我看了一会,觉得不是我想要的效果.po ...

  4. 批处理数据库(利用batch插入2w条数据)

    public class Demo02Batch { /* * 批处理 */ public static void main(String[] args) { Connection conn=null ...

  5. python特殊成员函数

    1.__init__():构造函数 2.__del__():析构函数 3.print(__doc__):打印描述信息 4.print(Dog.__module__):类来自的模块 5.print(d1 ...

  6. SVN下载项目导入到eclipse中出现错误解决办法:

    首先要确定settings.xml配置路径正确 (下面是我自己的路径,设置自己的路径) 用客户端暴力解决方法: 1)把本地中工作空间中内容删除重新下载 2)导入到eclipse中 会出现一些问题 右键 ...

  7. Python - requests https请求的坑

    #-*-coding:utf-8-*- # Time:2017/9/25 20:41 # Author:YangYangJun import requests import ssl from requ ...

  8. js插件---iCheck是用来做什么的

    js插件---iCheck是用来做什么的 一.总结 一句话总结:25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 定制复选框 定制单选按钮 1.iCheck常用的 ...

  9. 雷林鹏分享:C# 运算符

    C# 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C# 有丰富的内置运算符,分类如下: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 本教程将逐一讲解算术运算 ...

  10. VLC播放H264文件问题

    VLC1.1.7版本默认情况下不能播放H264数据流.需要做如下设置