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框有透明效果,同时文字和字体图标也会有透明效果,导 ...
随机推荐
- 【译】第19节---数据注解-NotMapped
原文:http://www.entityframeworktutorial.net/code-first/notmapped-dataannotations-attribute-in-code-fir ...
- Python: find the smallest and largest value
题目要求: Write a program that repeatedly prompts a user for integer numbers until the user enters 'done ...
- Android 使alertDialog.builder不会点击外面和按返回键消失
这个问题之前一直困扰我,我的需求就是点击对话框外面和按返回键对话框不会消失,按返回键还好解决,拦截下返回键就OK了. 但是点击外面不好解决.之前有人说模态对话框,我看了一会,觉得不是我想要的效果.po ...
- 批处理数据库(利用batch插入2w条数据)
public class Demo02Batch { /* * 批处理 */ public static void main(String[] args) { Connection conn=null ...
- python特殊成员函数
1.__init__():构造函数 2.__del__():析构函数 3.print(__doc__):打印描述信息 4.print(Dog.__module__):类来自的模块 5.print(d1 ...
- SVN下载项目导入到eclipse中出现错误解决办法:
首先要确定settings.xml配置路径正确 (下面是我自己的路径,设置自己的路径) 用客户端暴力解决方法: 1)把本地中工作空间中内容删除重新下载 2)导入到eclipse中 会出现一些问题 右键 ...
- Python - requests https请求的坑
#-*-coding:utf-8-*- # Time:2017/9/25 20:41 # Author:YangYangJun import requests import ssl from requ ...
- js插件---iCheck是用来做什么的
js插件---iCheck是用来做什么的 一.总结 一句话总结:25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 定制复选框 定制单选按钮 1.iCheck常用的 ...
- 雷林鹏分享:C# 运算符
C# 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C# 有丰富的内置运算符,分类如下: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 本教程将逐一讲解算术运算 ...
- VLC播放H264文件问题
VLC1.1.7版本默认情况下不能播放H264数据流.需要做如下设置