css实现背景渐变:实现窗体的渐变背景

a:关键所在

渐变图形是一种特殊的图形,它从窗体的一端开始移动,同时颜色缓慢变化,达到窗体的另一端,但图形已经变为另一种颜色。

这种奇特的视觉效果制作起来相当简单,只需将屏幕分成许多行,每一行显示不同的颜色就可以了。渐变图形可以有许多种形式,有圆形渐变、矩形渐变、对角渐变等多种显示效果。要显示渐变,需使用到rgb 宏,每次使颜色值的各颜色分量稍有变化。

b:实现与应用

选择菜单 file | new application,创建一个新的项目文件。在窗体 form1 上放置一个 tcolordialog 控件,然后切换到unit1.h,在 tform1 的 private 部分加入两个变量的定义,分别用于设置起始颜色和终止颜色。

private: // user declarations
tcolor startcolor,endcolor;

然后双击窗体,创建窗体的 _disibledevent=tcolor(rgb(redstart+int(redinc*i),
greenstart+int(greeninc*i),
bluestart+int(blueinc*i)));
canvas->moveto(i,0);
canvas->lineto(i,height);
}
}
//---------------------------------------------------------------------------
c:专家点评

程序中设渐变开始的颜色为 startcolor,结束的颜色为 endcolor。利用getrvalue、getgvalue、getbvalue 函数分别获得开始颜色的红、绿、蓝三原色分量 redstart greenstart bluestart 和结束颜色的三原色红、绿、蓝分量 redend greenend blueend。如果矩形的宽度为 pwidth 象素,则每次变化的各颜色分量值应分别为(redend-redstart)/pwidth、(greenend-greenstart)/pwidth、(blueend-bluestart)/pwidth,最后写一个循环,画一系列直线。

这里介绍的仅仅是颜色渐变的一种形式,读者完全可以参照其实现方法,改变数学运算,实现如“从上至下逐步加深”、“从左至右逐步加深”等颜色渐变形式,此外,还可以通过画一系列颜色不断变化的圆,制作圆形渐变效果。首先画一个最大的圆,然后依次画半径比前一个圆小一个象素的圆,然后依次画半径比前一个圆小一个象素的圆,同时圆的颜色也发生变化。
Tags:  网页渐变背景 css背景渐变 渐变背景 css实现背景渐变

延伸阅读

最新评论

发表评论