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);
}

Best Wishes For You!

时间: 2024-08-25 20:28:48

CSS3透明背景+渐变样式的相关文章

CSS3魔法堂:背景渐变(Gradient)

一.前言   很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅.   二.CSS3的各种背景渐变   1. 线性渐变      示例--七彩虹           代码: <style type="text/css"> .rainbow-linear-gradient{ width: 460px; height: 160px; background-image: -webkit-linear-grad

webkit博客:CSS3线性渐变样式语法

网页制作Webjx文章简介:webkit对于CSS3渐变样式语法的更新. 之前,我在前端观察发表了一篇<理解CSS3线性渐变>,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊.事实上,对比W3C规范,可以发现Firefox的语法更规范一些.现在好消息来了,Webkit开始优化CSS3渐变的语法了.真搞不懂当年(08年)webkit为什么采用那种写法. 具体哪种写法更优秀就不讨论了,近日webkit在其博客中介绍了渐变的新写法,新写

巧用Photoshop图层表现双重渐变透明背景

渐变|透明 下面这个实例教程主要介绍利用大家最为熟悉的Photoshop"图层"的一些深度特性:这辆悍马- H2的图片很COOL,可是背景流于平淡.缺乏纵深,没有衬托出它的美感. 通过PS处理之后,背景变得飘渺.大家不难发现,这张图增加的背景是渐变过渡的.正常情况下,PS无论是选取.裁切都很难实现渐变透明,即使带有透明度的橡皮,平滑过渡也非常费时.费力.而下面的方法,绝对可以让你在10分钟之内达到目的.处理前处理后 1. 打开图片: 2. 导入选中的背景图片: 3. 调整新图片的位置:

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载 源代码(只是写了moz下的效果,we

CSS3设计动态立体盒子:CSS3透明水晶盒

文章简介:纯CSS3透明水晶盒. 相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载 源

IE6兼容透明背景图片及解决方案_javascript技巧

首先给大家展示效果图: JS代码:  <!--[if IE 6]> <script src="~/Scripts/UI/DD_belatedPNG.js"></script> <script> $(function () { //1.通过公共类 DD_belatedPNG.fix(".pngFix,.pngFix:hover"); //2.直接用选择器:类名,ID,标签 DD_belatedPNG.fix("

css透明背景不兼容解决办法详解

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的.  代码如下 复制代码 .transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /

ps怎么把二维码设置为透明背景?

  ps怎么把二维码设置为透明背景?微信二维码在下载之后的图片是带有一个白色背景的,我们在设计图稿时,二维码带有一个白色背景非常的不方便,我们应该怎么把白色的背景去掉呢?下面我用ps简单介绍一下去掉二维码白色背景的方法. 1.首先打开photosop,新建一个透明图层,文件>新建,新建时,背景色选择透明色. 2.在这个文档中打开我们要变为透明背景的二维码,打开之后如下图所示.(二维码为自己生成,不存在广告信息) 3.然后在右侧选择图层样板,选择图层旁边的通道. 4.通道种我们会看到有rgb 红

CSS3网页制作技巧:css3多重背景

文章简介:css3以下版本的background只能单独对一张图片进行背景设置.平铺方式.背景位置.而在css3赋予了它更大的权利,可以设置更多背景图片,这就是今天要说的css3多重背景. 对于background不必多做解释了,如果不了解的可以单独论坛发帖. css3以下版本的background只能单独对一张图片进行背景设置.平铺方式.背景位置.而在css3赋予了它更大的权利,可以设置更多背景图片,这就是今天要说的css3多重背景. 多重背景语法:background:背景,背景,背景: 1