欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3实现背景颜色渐变让图片不再是唯一的实现方式

程序员文章站 2023-01-06 09:42:26
对于网页设计师而言,颜色渐变在网页设计中十分常见,而对于网页制作者来说,通常的方法就是把渐变切成图片来实现。伴随着css3的出现,实现背景颜色渐变,图片不再是唯一的实现方式,... 12-12-18...

纵向渐变: 

复制代码
代码如下:

<tr>
<td style="font-weight:bold;color:black;border:1px solid #e5f5ff; filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#e5f5ff', gradienttype='0');">
text
</td>
</tr>

                                        css3实现背景颜色渐变让图片不再是唯一的实现方式

横向渐变:

复制代码
代码如下:

<tr>
<td style="font-weight:bold;color:black;border:1px solid #e5f5ff; filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#e5f5ff', gradienttype='1');">
text
</td>
</tr>

                                                                      css3实现背景颜色渐变让图片不再是唯一的实现方式

默认纵向渐变颜色:

复制代码
代码如下:

<tr>
<td style="font-weight:bold;color:black;border:1px solid #e5f5ff; filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#e5f5ff', gradienttype='2');"> text
</td>
</tr>

                                css3实现背景颜色渐变让图片不再是唯一的实现方式

对于网页设计师而言,颜色渐变在网页设计中十分常见,而对于网页制作者来说,通常的方法就是把渐变切成图片来实现。伴随着css3的出现,实现背景颜色渐变,图片不再是唯一的实现方式。虽然ie浏览器还没有实现,但mozilla和webkit内核的浏览器已经接受了这一实现方式。在这里面,我分别就这两种内核的浏览器进行讲解。
一、以firefox为代表的mozilla内核的浏览器(注意,以下的图请有firefox浏览器下查看)
firefox的linear gradient(线性渐变)的几点说明:
1)基本语法:

复制代码
代码如下:

background-image:-moz-linear-gradient(
[<point>||<angle>],
开始颜色值,
结束颜色值,
[(停靠颜色值,偏移量百分数),...]
);

1、-moz-linear-gradient是background的一个属性值;
2、它的第一组参数<角度位置>非常灵活,他的基本组成点位<point>(渐变的出发点)和角度,它可以被指定为一个百分比,像素,或者使用”left”,”center”,”right”的水平和”top”、”center”、”buttom”的垂直定位。位置从最爱影响的元素左上角开始。如果只在水平渐变的话,只要设置:”left center”或”right center”,如果垂直渐变的话,设置为”center top”或者”center bottom”。firefox下可以省略掉center。

复制代码
代码如下:

background-image:-moz-linear-gradient(left center,#fff800,#f60);
background-image:-moz-linear-gradient(right center,#fff800,#f60);
background-image:-moz-linear-gradient(top,#fff800,#f60);

3、如果这两个值是百分比的值的话,那么第一个是水平渐变位置,第二个是垂直渐变位置,这个时间还需要一个角度值,比如“90deg”,你也可以随意改动大小来查看显示结果。

复制代码
代码如下:

background-image:-moz-linear-gradient(180deg,#fff800,#f60);
background-image:-moz-linear-gradient(0deg,#fff800,#f60);
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue);

二、以chrome为代表的webkit内核的浏览器(注意,以下的图请在chrome浏览器下查看)
webkit内核的浏览器有safai、chrome的linear gradient(线性渐变)的几点说明:
1)基本语法:

复制代码
代码如下:

background-image:-webkit-gradient(
type,
x1,
y1,
x2,
y2,
from(开始颜色值),
to(结果颜色值),
[color-stop(偏移量小数,停靠颜色值),...]
);-webkit-gradient(
type,
start_point,
end_point,
stop...
)

参数类型 简要说明
type 渐变的类型,分为线性渐变(linear)和径向渐变(radial)
start_point 渐变图片中渐变的起始点
end_point 渐变图像中渐变的结束点
stop color-stop()方法,指定渐变进程中特定的颜色
inner_center 内部中心点,径向渐变起始圆环
inner_radius 内部半径,径向渐变起始圆
outer_center 外部渐变结束圆的中心点
outer_radius 外部渐变结束圆的半径
1、start_point(x1,y1),end_point(x2,y2),这里的x,y对应左上角为起点的坐标,此处的x,y参数表示与css中的background-position是一致的,可以使用像素、百分比或者left,top,right,bottom。
当x1 = x2,y1 ≠ y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
bbackground-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#fff800), to(#f60));
当y1 = y2,x1 ≠ x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
bbackground-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60));
当y1 ≠ y2,x1 ≠ x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
bbackground-image:-webkit-gradient(linear,10% 30%, 100% 100%, from(#fff800), to(#f60));
当x1=x2,y1=y2,没有渐变。
2、color-stop是一个过渡点,相当于ps里面,多添加一个渐变的点,有两个参数,一个是点的位置,另外一个是过渡点的颜色。
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60),color-stop(20%,#fff));
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#fff),color-stop(20%,#fff),color-stop(20%,#f60));
3、创建径向渐变
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#fff800), to(#f60), color-stop(90%, #c00));
转载请注明本文链接:http://www.rainleaves.com/html/1214.html
由 lyhydfp 发表在 html5+css3分类目录,并贴了 css3、linear gradient、背景线性渐变 标签。
ie浏览器下渐变设置方法

复制代码
代码如下:

/* ie浏览器 */
background-image:filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#4477a1', endcolorstr='#81a8cb'); /* ie6,ie7 */
-ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#4477a1', endcolorstr='#81a8cb')"; /* ie8 */