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框有透明效果,同时文字和字体图标也会有透明效果,导 ...
随机推荐
- QT中QLineEdit的editingFinished()信号在按下回车时会触发两次的解决办法
class MyLineEdit : public QLineEdit { Q_OBJECT public: MyLineEdit(QWidget * parent = 0) : QLineEdit( ...
- JsonKey小写
System.Text.RegularExpressions.MatchCollection ms = System.Text.RegularExpressions.Regex.Matches(eca ...
- unity3d 加载优化建议 总结 from 侑虎科技
第一部分 我们对于纹理资源的加载建议如下: 1.严格控制RGBA32和ARGB32纹理的使用,在保证视觉效果的前提下,尽可能采用“够用就好”的原则,降低纹理资源的分辨率,以及使用硬件支持的纹理格式. ...
- input标签让光标不出现
<input class="red" readonly unselectable="on" > input点击变为搜索框,用form包住绑定搜索事 ...
- 添加删除tag
为某个分支打tag git tag -a v1. 9fceb02 删除tag git tag -d test_tag git push origin --delete tag test_tag 推送: ...
- python3 items() 与 python2 中iteritems()的区别
在Python2.x中, iteritems() 用于返回本身字典列表操作后的迭代 Python 3.x 里面, iteritems() 方法已经废除了,而 items() 得到的结果是和 2.x 里 ...
- Servlet中web.xml的配置
引言:这是一个采用原生Servlet开发的项目的一个简要配置,在这里记录一下,以便以后用到了 可以直接copy,如又侵权,请联系本博主. <?xml version="1.0" ...
- gc调优我们到底在调整什么
java开发一般都会涉及到jvm调优其中gc调优是个重点项.那gc调优调整的究竟是什么呢准确来说是业务.下面围绕这个话题展开 起因 为什么说是业务呢得从cc++开始说起如果说是用c/c++做开发运行的 ...
- 关于Java类和包的那些事
*.Java文件 问题:一个.java源文件中是否可以包括多个类(不是内部类)?有什么限制? 答案:可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致.一个文件中可以 ...
- MySQL学习(十一)
MySQL的函数 1 数学函数 2 字符串函数 3 日期和时间函数 4 条件判断函数 5 系统信息函数 6 加密解密函数 7 其他函数 2 字符串函数 length计算的是字节长度 char_leng ...