css3实现背景颜色渐变让图片不再是唯一的实现方式
发布时间：2012-12-18 15:17:14 作者：佚名 
我要评论
我要评论对于网页设计师而言，颜色渐变在网页设计中十分常见，而对于网页制作者来说，通常的方法就是把渐变切成图片来实现。伴随着css3的出现，实现背景颜色渐变，图片不再是唯一的实现方式,在这里面，我分别就这两种内核的浏览器进行讲解
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
纵向渐变：
复制代码
代码如下:<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>
横向渐变：
复制代码
代码如下:<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>
默认纵向渐变颜色：
复制代码
代码如下:<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的出现，实现背景颜色渐变，图片不再是唯一的实现方式。虽然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 */
相关文章
本篇文章主要介绍介绍了css3编写浏览器背景渐变背景色的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-05- 这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-09-12
- 这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感2016-10-19
- 这篇文章主要介绍了用CSS3实现背景渐变的方法,作者并没有给出效果demo这个比较残念...需要的朋友可以参考下2015-07-14
纯css3实现的渐变背景效果，不需要使用图片和JS2012-09-19
这篇文章主要介绍了css3实现背景动态渐变效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-10
最新评论