您好!欢迎您光临网页背景色,如何用代码实现_汕头港湾! 棋牌 I 论坛 I 企业建站 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页工具>>>网页背景色,如何用代码实现
网页背景色,如何用代码实现
发表日期:2010/4/28 22:46:00 出处:本站原创 作者:常青树 发布人:pilots 已被访问 3280
我顶 字号:

一、用CSS滤镜(占用客户端资源)

1)

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient

(gradientType=0,startColorStr=#ff1122,endColorStr=#ff000000);">

2)

<STYLE type=text/css>
<div align="center">

.menu {

display:block;

position:absolute;

}

a.bimzcymenu, a.bimzcymenu:visited {

color:#33FF33;

FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#66FF00 ,EndColorStr:#FF00FF ,GradientType:1); width:78px;

height:25px;

display:block;

border:1px solid #CCFF00 ;

margin-right:-1px;

text-align:center;

float:left;

text-decoration:none;

font-family:tahoma, vardana, arial, sans-serif;

font-size:12px;

line-height:23px;

overflow:hidden;

}

a.bimzcymenu:hover{

color:#00FF66 ;

background:#FF00ff;

FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#FF3333 ,EndColorStr :#ff9305,GradientType:0);

overflow:visible;

}

a.bimzcymenu:hover table{

display:block;

border-collapse:collapse;

}

a.submenu, a.submenu:visited{

display:block;

FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#FFFF33 ,EndColorStr :#FF3333 ,GradientType:0);

width:73px;

height:25px;

border-bottom:2px solid #FF3399;

text-decoration:none;

line-height:25px;

color:#FFFF33 ;

font-family:tahoma, vardana, arial, sans-serif;

font-size:12px;

text-align:center;

}

a.submenu:hover{

FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#f78652

,EndColorStr :#FFFF33 ,GradientType:0);

}

以下这段代码仔细修改后在HTML模式下发布,选择置顶,展开

3)CSS控制网页渐变色两例代码

<body style="FILTER: progid:DXImageTransform.Microsoft.Alpha(

style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue">

是用progid:DXImageTransform.Microsoft.Alpha函数来做FILTER,函数参数说明如下:

filter:   Alpha(Opacity=?,   FinishOpacity=?,   Style=?,   StartX=?,   StartY=?,   FinishX=?,   FinishY=?); 

Alpha   滤镜     //CSS例 
.menu{             background:#3399ff;width:100;height:300; 
            filter:alpha(opacity=80,   finishOpacity=0,   style=1,   startX=70);} 
      语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, 
starty=starty,finishx=finishx,finishy=finishy)} 

        "Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透

明度。通过指定坐标,可以指定点、线、面的透明度。他们的参数含义分别如下: 

     "opacity"代表透明度水准。默认的范围是从0   到   100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明

。”finishopacity"是一个可选参数, 如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0   到   100。

  "style"   参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、 
3代表长方形。"STARTX"和"STARTY"代表渐变透明效果的开始X和Y坐标。"FINISHX“和” 
FINISHY"代表渐变透明效果结束X和Y   的坐标。 
--------------------------------------------------------------- 

Alpha兼容性:IE4.0+ 
语法:CSS     filter   :   progid:DXImageTransform.Microsoft.Alpha   (   enabled=bEnabled   ,   style=iStyle   ,  

opacity=iOpacity   ,   finishOpacity=iFinishOpacity   ,   startX=iPercent   ,   startY=iPercent   ,   finishX=iPercent   ,  

finishY=iPercent   )     
Scripting     object.style.filter   =   "progid:DXImageTransform.Microsoft.Alpha   (   sProperties   )   "     

enabled   Enabled   设置或检索滤镜是否激活。   
style   Style   设置或检索透明渐变的样式。   
opacity   Opacity   设置或检索透明渐变的开始透明度。   
finishOpacity   FinishOpacity   设置或检索透明渐变的结束透明度。     
startX   StartX   设置或检索透明渐变开始点的水平坐标。   
startY   StartY   设置或检索透明渐变开始点的垂直坐标。   
finishX   FinishX   设置或检索透明渐变结束点的水平坐标。   
finishY   FinishY   设置或检索透明渐变结束点的垂直坐标。   
说明: 
调整对象内容的透明度。 
你可以设置整体透明度,或线性渐变和放射渐变的透明度。

另类似,有图片渐变:

 程序代码<img src="" width=400 height=300 style="FILTER: progid:DXImageTransform.Microsoft.Alpha(

style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)">


II:<DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FILTER: progid:DXImageTransform.Microsoft.gradient

(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1); PADDING-BOTTOM: 3px; WIDTH: 420px; COLOR: #ffffff; PADDING-

TOP: 3px; HEIGHT: 20px; BACKGROUND-COLOR: #ffffff" ;>CSS滤镜的运用:色彩</DIV>

IV:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.gradient

(startColorStr:#ffff00ff,EndColorStr :#ff00ff00,GradientType:0); PADDING-BOTTOM: 6px; WIDTH: 420px; COLOR: #ffffff; PADDING-

TOP: 6px; HEIGHT: 100px; BACKGROUND-COLOR: #ffffff" ;>CSS滤镜的运用:色彩</DIV>

4)

在网页中做渐变色一直是个比较痛苦的事情,又是图片又是背景,现在好了,找了下搜索引擎终于发现其实样式表是可以实现渐变的效果的,

以前一直都不知道,诶。

       1、从左到右的渐变:style="FILTER:progid:DXImageTransform.Microsoft.Gradient

(gradientType=1,startColorStr=#0000ff,endColorStr=#fffffff);"

       2、从上到下的渐变:style="FILTER:progid:DXImageTransform.Microsoft.Gradient

(gradientType=0,startColorStr=#ffffff,endColorStr=#0000ff);"

       3、文字的渐变效果:
.FadeLine
{
padding-right: 0px;
border-top: #538f65 2px solid;
padding-left: 0px;
font-size: 22px;
filter: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=10,startX=10,finishX=100);
padding-bottom: 0px;
margin: 0px;
color: #3366cc;
padding-top: 0px;
}


      呵呵,其实代码是很简单,只是以前一直没有去研究过,哈哈,以后做程序,渐变的图片,就可以直接用这样的CSS代码去实现了,真是好事情那!

5)以前我们看到的所谓连续渐变色文字,都是逐字变色的。而我们看到的下面的演示中的真正的连续渐变色文字,你应该没有见过吧?而且演

示中是一个文本输入框,它可以接受用户的输入!


  实际上,我们看到的渐变色文字的颜色,是透明的文字背后的渐变色图片的颜色。下面让我们看看它是怎么做出来的。

  先介绍一下这个神奇的滤镜:Chroma() 滤镜。

  它的语法是: FILTER:Chroma( Color=#FF0000) ,其中“#FF0000”是颜色值。

  它的作用效果是:在该滤镜控制范围内,如果像素颜色与其Color值相同,则该像素(包括图片的像素)变为透明。例如使用的语句是

FILTER:Chroma( Color=#FF0000) ,则滤镜作用范围内所有颜色为红色的像素都变为透明。

  因此我们可以用这个滤镜,把输入框的文字变为透明,然后在它背景放一幅动态的渐变色图像,就可以实现这个效果了。

  这是很简单的动画,只是元件位置的移动而已,自己做一个也不难吧。下面介绍实现的代码:
<!-- 第一步,设置背景图片。我们把它的尺寸设到最小,因为它会被“撑大”。黑色背景的设置是为防止图片加载错误时文字看不到 -->
<div style="background:url(mcolor.gif);background-color:#000000;width:1;height:1">

<!-- 第二步,用Chroma()滤镜把红色设为透明色。为了只是文字透明,我们设置了白色的背景色作掩盖 -->
<div STYLE=''FILTER:Chroma(color=#FF0000);background-color:#FFFFFF;width:1;height:1;''>

<!-- 第三步,把文本输入框的文字颜色设为红色 -->
<input type="text" name="text" size="25" style="color:#FF0000;border:1px solid #000000;" value="这是输入框中的渐变色文字" >

<!-- OK,结束所有标签 -->
</div>


</div>

 二.

用图片是最好得选择,只需做成1PX宽度横向平铺就行了,因为有些浏览器不支持滤镜。如现在正开始流行得FIREFOX。

 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:悠扬的舞步 满怀的激情 流行歌伴舞《姑娘我爱你》3CD 320Kbps/mp3

下篇文章:CSS中的Filter样式特效详解

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

汕头港湾(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:491341756 联系人:常青树

琼icp备09005167