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框有透明效果,同时文字和字体图标也会有透明效果,导 ...
随机推荐
- hadoop的Linux操作
初学hadoop之linux系统操作的hdfs的常用命令 Hadoop之HDFS文件操作 Hadoop fs命令详解 官网doc sudo su - hdfs:免密,以hdfs账户登陆.可操作hdfs ...
- NLog汇总
相关文章 NLog文章系列——系列文章目录以及简要介绍 Elasticsearch,Kibana,Logstash,NLog实现ASP.NET Core 分布式日志系统 ElasticSearch+N ...
- Ubuntu 18.04版本下安装网易云音乐
这是我迄今为止发现的最完美的解决方法,不用改任何东西,只需要安装然后打开即可,后台也有. 参考:http://archive.ubuntukylin.com:10006/ubuntukylin/poo ...
- JavaScript(ES5)知识点梳理
数据类型(null undefined number string boolean object)数据类型之间的相互转化(Boolean Number String parseInt parseFlo ...
- ASP.NET开发总结
ASP.NET的界面可以是.aspx,会对应有一个.aspx.cs的逻辑处理文件,.aspx的所有控件对应着变量,变量名就是控件的ID. 为了代码编写方便起见,一般将数据库表的新增字段,放在最后. 日 ...
- java web 工程更改名字
如图: 将工程名字struts2Project02更改为struts2Project03,步骤如下: 1. 右键工程名字,选中properties,如图 2.更改项目名字 3.第2步已经真正把项目名字 ...
- [Python]IO密集型任务 VS 计算密集型任务
所谓IO密集型任务,是指磁盘IO.网络IO占主要的任务,计算量很小.比如请求网页.读写文件等.当然我们在Python中可以利用sleep达到IO密集型任务的目的. 所谓计算密集型任务,是指CPU计算占 ...
- C#双缓冲代码
private void Form1_Load(object sender, EventArgs e) { //在窗体加载的时候 解决窗体闪烁问题 //将图像绘制到缓冲区减少闪烁 this.SetSt ...
- ORA-00604的解决方法
分类: Oracle 从错误的角度可以推出:应该是表空间不足 根据查看表空间的使用情况: select b.file_name 物理文件名, b.tablespace_name 表空间, b.by ...
- Javascript 常用设计模式
转载自:https://blog.csdn.net/buptlyz/article/details/52018193 单例模式(模块模式):确保始终只创建一个实例的对象时使用的设计模式. 为什么需要采 ...