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



A:关键所在

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

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

B:实现和应用

选择菜单 File | New Application创建个新项目文件在窗体 Form1 上放置个 TColorDialog Control控件然后切换到Unit1.h在 TForm1 private 部分加入两个变量定义分别用于设置起始颜色和终止颜色

private: // User declarations
TColor StartColor,EndColor;

然后双击窗体创建窗体 _disibledevent=>  (ColorDialog1->Execute)
    EndColor=ColorDialog1->Color;
}
//---------------------------------------------------------------------------
最后创建窗体 Form1 _disibledevent=>  redstart=GetRValue(StartColor);
  greenstart=GetGValue(StartColor);
  bluestart=GetBValue(StartColor);
  redend=GetRValue(EndColor);
  greenend=GetGValue(EndColor);
  blueend=GetBValue(EndColor);
  redinc=(redend-redstart)/pwidth;
  greeninc=(greenend-greenstart)/pwidth;
  blueinc=(blueend-bluestart)/pwidth;
  for( i=0;i<Width;i)
  {
    Canvas->Pen->Color=TColor(RGB(redstart+(redinc*i),
    greenstart+(greeninc*i),
    bluestart+(blueinc*i)));
    Canvas->MoveTo(i,0);
    Canvas->LineTo(i,Height);
  }
}
//---------------------------------------------------------------------------
C:专家点评

中设渐变开始颜色为 StartColor结束颜色为 EndColor利用GetRValue、GetGValue、GetBValue 分别获得开始颜色红、绿、蓝 3原色分量 redstart greenstart bluestart 和结束颜色 3原色红、绿、蓝分量 redend greenend blueend如果矩形宽度为 pwidth 象素则每次变化各颜色分量值应分别为(redend-redstart)/pwidth、(greenend-greenstart)/pwidth、(blueend-bluestart)/pwidth最后写个循环系列直线

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


Tags:  网页渐变背景 css背景渐变 渐变背景 css实现背景渐变

延伸阅读

最新评论

发表评论