中关村在线

首页 排行 新品 问答 下载 论坛 手机 笔记本 数码相机 主板 显卡 平板电脑 更多

怎么将一块div为黑色背景 渐变成上黑下部透明的?

举报
讨论回答 (9)
linbin0814
ae86qaz
lanbaby
n9216
mtongi
ming893203
qweqazrailhun
ROYCHU
zyy06647573
不同浏览器使用的内核不同,导致对渐变的代码写法也不同。
一、Webkit
又称Safari内核,Chrome内核原型,。它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。360急速浏览器,QQ浏览器、搜狗浏览器用的是Webkit内核。尽管Mozilla和Webkit通常对css3属性采取同样的语法,但是对于渐变,他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:
/* 语法,参考自:
http://webkit.org/blog/175/introducing-css-gradients/ */-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)/* 实际用法... */background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))
Mozilla浏览器
Mozilla Firefox(正式缩写为 Fx,非正式缩写为FF),中文名为火狐,是由Mozilla基金会( 谋智网络)与开源团体共同开发的网页浏览器。
Firefox,从3.6版本才开始支持渐变,更喜欢和Webkit略微不同的语法。
/* 语法,参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )/* 实际用法*/background: -moz-linear-gradient(top, red, blue);

请注意我们将渐变的类型——linear——放到了属性前缀中了
渐变从哪里开始? (top – 我们也可以使用度数,比如-45deg)
开始的颜色? (red)
结束的颜色? (blue)
Color-Stops
如果你不需要从一个颜色到另一个颜色的100%渐变怎么办?这就是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变,比如:

注意顶部的浅灰色到白色的细小的渐变
在过去,标准的做法就是制作一个图片,并将其设为一个元素的背景图片,然后让其水平平铺。然而使用CSS3,这是个小Case。
1、 background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */2、background: -moz-linear-gradient(top, #dedede, white 8%);3、background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));4、border-top: 1px solid white;
这次,我们让渐变结束于8%,而不是默认的100%。请注意我们也在头部采用了一个边框,以形成对比。这很常用。
如果我们想要添加多一种(几种)颜色,我们可以这样做:
1、 background: white; /* 备用属性 */2、background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);3、background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
对于-moz 版本,我们定义,从元素的20%的高度的地方开始是红色。
而对于-webkit,我们使用color-stop,采用两个参数:哪里开始停止,使用哪种颜色。

三、IE
IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果:
1、 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */2、-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
PS:事实上,我们在《RGBa色彩的浏览器支持》提到的IE的解决方法,就是使用这个渐变滤镜。
关于CSS渐变的一些要点:
尽可能的使用它。如果让IE用户看到一个固定的纯色,我鼓励你使用这种方法;
IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 渐变,Firefox 和Safari用户通常经常升级浏览器,而Chrome的自动升级机制会在后台自动升级,所以这并不是个大问题;
总是为不支持这些浏览器私有属性的浏览器应用一个默认的,纯色背景;
永远不要使用红色到蓝色的渐变,就像我用作例子的这种;
页面无须在每个浏览器里面看起来完全一样!
Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标。

渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。

要得上面的线性渐变效果,我们这样去定义CSS3样式:
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的

看下面这种简单的理解
一. Webkit浏览器
(1) 第一种写法:
background:-webkit-gradient(linear ,10% 10%,100% 100%,
color-stop(0.14,rgb(255,0,0)),
color-stop(0.5,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)) );
第一个参数:表示的是渐变的类型
linear线性渐变
第二个参数:分别对应x,y方向渐变的起始位置
第三个参数:分别对应x,y方向渐变的终止位置
第四/五/N个参数:设置渐变的位置及颜色
(2)第二种写法:这种写法比较简单,而且效果比较自然
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));
第一个参数:表示的是渐变的类型
linear线性渐变
第二个参数:分别对应x,y方向渐变的起始位置
第三个参数:分别对应x,y方向渐变的终止位置
第四个参数:设置了起始位置的颜色
第五个参数:设置了终止位置的颜色
二.Mozilla浏览器
(1)第一种写法:
background:-moz-linear-gradient(10 10 90deg,
rgb(25,0,0) 14%,
rgb(255,255,0) 50%,
rgb(0,0,255) 100%);
第一个参数:设置渐变起始位置及角度
第二/三/四/N个参数:设置渐变的颜色和位置
(2)第二种写法:这种写法比较简单,而且效果比较自然
background:-moz-linear-gradient(top, #FFC3C8,#FF9298);
第一个参数:设置渐变的起始位置
第二个参数:设置起始位置的颜色
第三个参数:设置终止位置的颜色
三.IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数:渐变起始位置的颜色
第二个参数:渐变终止位置的颜色
第三个参数:渐变的类型
0 代表竖向渐变 1 代表横向渐变
P.S.这里设置背景的时候不需要给background设置,直接用filter即可,不要和其他的浏览器混淆
参考:
http://www.qianduan.net/understand-the-css3-gradient.html
http://www.cnblogs.com/luckly-hf/archive/2011/11/14/2248149.html
http://www.wzsky.net/html/Website/CSS/113768.html
展开查看全部 9 条讨论
相关问题

为啥现在大多数的鼠标键盘都喜欢设计成黑色的呢?

1.3万 浏览 10 回答

怎么用摄影修图软件,把照片修成纯黑色背景?

1445 浏览 7 回答

请专业人士帮我看看我的配置有什么问题没有?另外机箱能不能放下这块主板,还有我主板买的黑色,内存买的银色,插上去会不会丑?

847 浏览 7 回答

打印机只有黑色或者白色的吗?

1256 浏览 6 回答

手机摔了一下,屏幕下端出现黑色墨迹般的东西,但不影响操作,是怎么回事?

1990 浏览 6 回答

相关产品
扩展阅读

双十一剁手清单:不到一千搞定五款家电 隔壁邻居馋哭

评论 1

双十一剁手清单:不到一千搞定五款家电 隔壁邻居馋哭

OPPO Find X8系列即将发布,六大卖点提前看

评论 1

OPPO Find X8系列即将发布,六大卖点提前看

这么硬核潮酷的移动固态硬盘见过么?aigo P3上手体验

评论 15

这么硬核潮酷的移动固态硬盘见过么?aigo P3上手体验

高画质全能表现 尼康全画幅微单相机选购攻略

评论 1

高画质全能表现 尼康全画幅微单相机选购攻略

vivo X200 Pro mini性能实测:先Pro再mini

评论 1

vivo X200 Pro mini性能实测:先Pro再mini
热门问题

幼儿裂缝进不去怎么办视频都市网

5778 浏览 7 回答

幼儿裂缝进不去怎么办视频都市网

256gSSD是否够用?打算买个笔记本,办公为主,查阅文献等。不玩大型游戏,至多玩一些棋牌类游戏和影音娱乐。手里有2T移动硬盘,但也想在笔记本上存少量的电影。平时玩单反,处理图片比较多。

2.3万 浏览 4 回答

256gSSD是否够用?打算买个笔记本,办公为主,查阅文献等。不玩大型游戏,至多玩一些棋牌类游戏和影音娱乐。手里有2T移动硬盘,但也想在笔记本上存少量的电影。平时玩单反,处理图片比较多。

2025年的传统節日

4378 浏览 6 回答

2025年的传统節日

iPhone肿么查LG屏还是三星屏

4845 浏览 9 回答

iPhone肿么查LG屏还是三星屏

肿么找回QQ浏览器历史记录

7286 浏览 6 回答

肿么找回QQ浏览器历史记录

macbook怎么下载人人影视的资源?mbp新手求别鄙视

4773 浏览 5 回答

macbook怎么下载人人影视的资源?mbp新手求别鄙视

马斯克有华人血脉吗

8761 浏览 7 回答

马斯克有华人血脉吗

excel怎么关闭AI助手

948 浏览 7 回答

excel怎么关闭AI助手

金幅夫人找管家。猜一动物!

1.1万 浏览 4 回答

金幅夫人找管家。猜一动物!

大疆无人机概念股有哪些

8919 浏览 7 回答

大疆无人机概念股有哪些
最新问答

i7 4710mq相当于界面级的什么cpu

3890 浏览 4 回答

i7 4710mq相当于界面级的什么cpu

寻找GTA 5的存档之路:存档文件位置详解

5656 浏览 6 回答

寻找GTA 5的存档之路:存档文件位置详解

辐射4核子世界dlc新增三大帮派perk效奏连果及代码一览

4986 浏览 4 回答

辐射4核子世界dlc新增三大帮派perk效奏连果及代码一览

王家狂战士《暗喻幻想》属性详解,强度如何?

8219 浏览 6 回答

王家狂战士《暗喻幻想》属性详解,强度如何?

一台台式电脑电脑最多能装几块硬盘

1.6万 浏览 5 回答

一台台式电脑电脑最多能装几块硬盘
举报
举报成功

经过核实后将会做出处理,感谢您为社区和谐做出贡献。

请选择删除原因
删除成功
确定推荐该回答?
推荐成功

更多频道

频道导航
辅助工具