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框有透明效果,同时文字和字体图标也会有透明效果,导 ...
随机推荐
- vs添加webservice
VS2010中添加WebService注意的几个地方 添加web引用和添加服务引用有什么区别? 2.4.1 基础知识——添加服务引用与Web引用的区别 C#之VS2010开发Web Service V ...
- PTA 输出全排列(20 分)
7-2 输出全排列(20 分) 请编写程序输出前n个正整数的全排列(n<10),并通过9个测试用例(即n从1到9)观察n逐步增大时程序的运行时间. 输入格式: 输入给出正整数n(<10). ...
- jquery选择器扩展之样式选择器
https://github.com/wendux/style-selector-jQuery-plugin http://blog.csdn.net/duwen90/article/details/ ...
- 2、corosync集群初步
配置高可用集群 配置环境:两台centos7 192.168.184.141 192.168.184.142 corosync v2 + pacemaker corosync v2:vote sys ...
- Android之使用传感器获取相应数据
Android的大部分手机中都有传感器,传感器类型有方向.加速度(重力).光线.磁场.距离(临近性).温度等. 方向传感器: Sensor.TYPE_ORIENTATION 加速度(重力)传感器: ...
- Java Object类及其equals方法
基本概念: Object类位于java.lang包中,java.lang包包含着Java最基础和核心的类,在编译时会自动导入: Object类是所有Java类的祖先.每个类都使用 Object 作为超 ...
- Python中数据类型
一.整数 Python可以处理任意大小的整数,当然包括负整数,在Python程序中,整数的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 计算机由于使用二进制,所以,有时候用 ...
- Mac批量转换mp3为caf
创建一个sh文件,输入如下代码后运行. 遍历文件夹中的mp3然后使用afconvert命令进行转换. #!/bin/bash for i in *.mp3; do afconvert $i " ...
- mui 配置底部tab切换方式以模板的方式访问
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java调用dll/so文件
大家都知道用C++编写的程序如果用于windows使用则编译为xxx.dll文件,如果是Linux使用则编译为libxxx.so文件.下面将java调用dll/so文件的方法粘出来方便下次使用.此处使 ...