CSS3透明背景+渐变样式
CSS3透明背景+渐变样式
核心代码如下:
- .map-interview {
- background-image:-webkit-linear-gradient(
- to right,
- rgba(0,0,0,0) 0%,
- rgba(0,0,0,0.4) 5%,
- rgba(0,0,0,0.6) 10%,
- rgba(0,0,0,0.6) 90%,
- rgba(0,0,0,0.4) 95%,
- rgba(0,0,0,0) 100%);
- background-image: linear-gradient(
- to right,
- rgba(0,0,0,0) 0%,
- rgba(0,0,0,0.4) 5%,
- rgba(0,0,0,0.6) 10%,
- rgba(0,0,0,0.6) 90%,
- rgba(0,0,0,0.4) 95%,
- rgba(0,0,0,0) 100%);
- height: 220px;
- left: 50%;
- margin-left: -350px;
- margin-top: -110px;
- padding: 10px 0px 10px 30px;
- position: absolute;
- top: 30%;
- width: 700px;
- border: 1px solid rgba(0, 0, 0, 0.1);
- }
CSS3透明背景+渐变样式的更多相关文章
- 关于css3的背景渐变
关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内 ...
- 笔记 : CSS3实现背景渐变过渡
使用CSS3的人都知道背景background-image是可以线性渐变(linear-gradient)和径向渐变(radial-gradient),但是想要做到过渡动画,单纯的background ...
- CSS3利用背景渐变和background-size配合完成渐变与条纹效果[持续更新中...]
1.不等垂直条纹. <!-- 不等垂直条纹 --> <div class="div1"></div>div1 div{ width: 200px ...
- css3实现背景渐变
#grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 ...
- CSS3透明背景表单
在线演示 本地下载
- CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- CSS3魔法堂:背景渐变(Gradient)
一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- CSS3实现背景透明文字不透明
最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...
随机推荐
- Codeforces 884C.Bertown Subway ----判环,思路
The construction of subway in Bertown is almost finished! The President of Berland will visit this c ...
- mysql分区分表讲解
为什么要分表和分区? 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询的情况,性能 ...
- 1、Python中的正则表达式(0601)
回顾: 1.文件对象: open('file','mode','bufsize') read,readline,readlines,write,writelines,flush,seek,tell 2 ...
- 【译】第14节---数据注解-MaxLength/MinLength
原文:http://www.entityframeworktutorial.net/code-first/maxlength-minlength-dataannotations-attribute-i ...
- 【译】第11节---数据注解-TimeStamp
原文:http://www.entityframeworktutorial.net/code-first/TimeStamp-dataannotations-attribute-in-code-fir ...
- C++类模板和模板类
C++ 中有一个重要特性,那就是模板类型.类似于Objective-C中的泛型.C++通过类模板来实现泛型支持. 1 基础的类模板 类模板,可以定义相同的操作,拥有不同数据类型的成员属性. 通常使用t ...
- Python—合并两个有序列表
def hb(list1,list2): result = [] while list1 and list2: ] < list2[]: result.append(list1[]) del l ...
- link 和 import的区别
二者区别: link属于html标签,而@import是css提供的. 页面被加载时,link因为是HTM标签, 把认会同时被加载,而@import引用的css会等到页面加载结束后加载. link是h ...
- mui 引导页
引导页制作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- using 自动释放资源示例
我们在使用SqlConnection的时候可以加入using,那么在using语句结束后就会自动关闭连接.那么这种情况是怎么是实现的呢?我们能够自己写一个类似于SqlConnection的类来让usi ...