设置DIV背景颜色透明度
创始人
2024-07-13 17:51:40
0

本节向大家爱描述一下如何设置DIV背景颜色透明度,opacityOpacity设置或检索透明渐变的开始透明度,Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征。

设置DIV背景颜色透明度

通常我们通过DIV的style样式属性filter来设置DIV背景透明样式。可根据alpha提供的如下参数进行组合控制:

  1. filter:Alpha(enabled=bEnabled,style=iStyle,  
  2. opacity=iOpacity,finishOpacity=iFinishOpacity,  
  3. startX=iPercent,startY=iPercent,  
  4. finishX=iPercent,finishY=iPercent);  
  5.  

各参数含义如下:

enabledEnabled设置或检索滤镜是否激活。

styleStyle设置或检索DIV背景透明渐变的样式。

opacityOpacity设置或检索透明渐变的开始透明度。

finishOpacityFinishOpacity设置或检索DIV背景透明渐变的结束透明度。

startXStartX设置或检索DIV背景透明渐变开始点的水平坐标。

startYStartY设置或检索DIV背景透明渐变开始点的垂直坐标。

finishXFinishX设置或检索DIV背景透明渐变结束点的水平坐标。

finishYFinishY设置或检索DIV背景透明渐变结束点的垂直坐标。

 Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。

 Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

[[15444]]

实现上面这种效果的代码如下:

  1.    
  2.    
  3.   alpha 
  4.    
  5.    
  6.    
  7.   
     
  8.    
  9.   Beautiful

    //*定义字体属性,前景色为红色*//  
  10.   
 
  •   

     
  •   //*导入一张图片*//  
  •    
  •    
  •   如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示:

    1.   img{position:absolute;top:20;left:40;  
    2.   filter:alpha(opacity=0,finishopacity=100,  
    3.   style=1,startx=0,starty=85,finishx=150,finishy=85);}  
    4.  //*设置DIV背景透明渐变效果,起始坐标,终止渐变坐标,
    5. 并设置透明样式值(style=1)为   线形*//  
    6.  

      这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果,点击缩略图可放大。  

               style=1  style=2   style=3

        Style=1       Style=2      Style=3

      以上是CSS的Alpha滤镜属性的应用,具体应用还需要您自己找个例子练一练。

    【编辑推荐】

    1. 鼠标经过时改变DIV背景颜色的三种途径
    2. 使用CSS设置网页DIV背景
    3. DIV背景透明样式使用
    4. 实现DIV图片居中方法揭秘
    5. 鼠标经过时改变DIV背景颜色的三种途径


     

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...