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

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

    设置DIV背景颜色透明度

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

    filter:Alpha(enabled=bEnabled,style=iStyle,

    opacity=iOpacity,finishOpacity=iFinishOpacity,

    startX=iPercent,startY=iPercent,

    finishX=iPercent,finishY=iPercent);各参数含义如下:

    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这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

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

    复制代码代码如下:

    alpha

    Beautiful

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

    //*导入一张图片*//

    如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示复制代码代码如下:

    img{position:absolute;top:20;left:40;

    filter:alpha(opacity=0,finishopacity=100,

    style=1,startx=0,starty=85,finishx=150,finishy=85);}

    //*设置DIV背景透明渐变效果,起始坐标,终止渐变坐标,

    并设置透明样式值(style=1)为 线形*//这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果,点击缩略图可放大。

        

    Style=1   Style=2Style=3

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

    展开全文
  • 感谢作者感谢原创~ div 背景透明度如何设置一个div的背景透明度 来源:互联网 ...你读DIV背景颜色透明度的设置是否熟悉,这里和大家简单分享一下,通常我们通过DIV的style样式属性filter来设置DIV

    感谢作者感谢原创~

    div 背景透明度如何设置一个div的背景透明度

    来源:互联网 作者:佚名 时间:12-31 16:55:48

    如何设置一个div的背景透明度,对于一些新手朋友有些陌生,接下来详细介绍实现方法,有需要了解的朋友可以参考下

    你读DIV背景颜色透明度的设置是否熟悉,这里和大家简单分享一下,通常我们通过DIV的style样式属性filter来设置DIV背景透明样式,也可根据alpha提供的参数进行组合控制。

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

    设置DIV背景颜色透明度

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

    复制代码

    代码如下:


    filter:Alpha(enabled=bEnabled,style=iStyle,
    opacity=iOpacity,finishOpacity=iFinishOpacity,
    startX=iPercent,startY=iPercent,
    finishX=iPercent,finishY=iPercent);


    各参数含义如下

    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这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

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

    复制代码

    代码如下:


    <html>
    <head>
    <title>alpha</title>
    <style>//*
    定义CSS样式*//
    <!--
    DIV{position:absolute;left:50;top:70;width:150;}
    //*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//
    img{position:absolute;top:20;left:40;
    filter:alpha(opacity=80)}
    //*定义图片的样式,绝对定位,滤镜属性是透明度为80*//
    -->
    </style>
    </head>
    <body>
    <DIV>
    <pstylepstyle=“font-size:48;font-weight:bold;color:red;”>
    Beautiful</p>//*定义字体属性,前景色为红色*//
    </DIV>
    <p><imgsrcimgsrc=“ss01076.jpg”></p>
    //*导入一张图片*//
    </body>
    </html>


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

    复制代码

    代码如下:


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


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

                  

      Style=1   Style=2Style=3

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

    Css-Tricks讲到了一些方法,看了一些大型门户网站的CSS,也是采用了这种方法,
    http://css-tricks.com/rgba-browser-support/

    也就是支持CSS3的浏览器就设置
    background:rgba(255,255,255,0~1),
    而低版本的IE浏览器就采用微软的独有的滤镜来实现:
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr=#AARRGGBB,endColorStr=AARRGGBB);

    使用方法
    GradientType: 渐变的方向 ,0为水平(默认),1为垂直。
    startColorStr:AA为透明度,范围00~FF..RRGGBB为十六进制颜色值,不熟悉颜色值的朋友可以用PS自带的拾色器来选择。
    endColorStr:同上

     

    展开全文
  • CSS如何设置div半透明效果:设置元素的透明度在很多应用中都有使用,下面就介绍一下如何设置一个元素为半透明,其他的透明效果自己衍伸就可以了。代码实例如下: <!DOCTYPE html> <html> <...

     

     

    CSS如何设置div半透明效果:
    设置元素的透明度在很多应用中都有使用,下面就介绍一下如何设置一个元素为半透明,其他的透明效果自己衍伸就可以了。
    代码实例如下:

     

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
    div
    { 
      filter:alpha(opacity=50);  
      opacity:0.5; 
      width:100px;
      height:100px;
      background-color:green;
    } 
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    复制代码

     

    opacity属性所以标准浏览器都支持,但是IE8和IE8以下浏览器不支持此属性,于是就使用filter:alpha(opacity=50)进行兼容,opacity的取值是0-1,但是filter下的那个取值是0-100。opacity属性可以参阅CSS的opacity属性一章节。

    原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9651

    转载于:https://www.cnblogs.com/hgbgfg/p/5087401.html

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

    本节向大家爱描述一下如何设置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这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

    DIV背景颜色透明度

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

    1. <html> 
    2. <head> 
    3. <title>alpha</title> 
    4. <style>//*定义CSS样式*//  
    5. <!--  
    6. DIV{position:absolute;left:50;top:70;width:150;}  
    7. //*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//  
    8. img{position:absolute;top:20;left:40;  
    9. filter:alpha(opacity=80)}  
    10. //*定义图片的样式,绝对定位,滤镜属性是透明度为80*//  
    11. --> 
    12. </style> 
    13. </head> 
    14. <body> 
    15. <DIV> 
    16. <pstylepstyle=“font-size:48;font-weight:bold;color:red;”> 
    17. Beautiful</p>//*定义字体属性,前景色为红色*//  
    18. </DIV> 
    19. <p><imgsrcimgsrc=“ss01076.jpg”></p> 
    20. //*导入一张图片*//  
    21. </body> 
    22. </html> 

    如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改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=2Style=3

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

    展开全文
  • 用rgba的方式给母div设置透明度的话就不会影响子div透明度了。 例: background: rgba(51, 51, 51, 0.5); 转载于:https://www.cnblogs.com/daihere1993/p/5070318.html
  • CSS如何设置透明度

    2019-09-30 18:08:40
    怎样用CSS样式表来设置DIV透明透明? ㈠首先说一下设置DIV透明的CSS代码: div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明: 1、filter:对win IE设置半透明滤镜效果,filter:...
  • Css-Tricks讲到了一些方法,看了一些大型门户网站的...也就是支持CSS3的浏览器就设置: background:rgba(255,255,255,0~1), 而低版本的IE浏览器就采用微软的独有的滤镜来实现: filter:progid:DXImageTransfor...
  • 如何使用jQuery设置背景的透明度:使用CSS可以设置背景的透明度,具体方法可以参阅CSS如何设置div背景透明度且兼容性良好,不过使用CSS设置透明度没有动态效果,如果实现也比较困难,下面就介绍一下如何利用jQuery...
  • 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box-shadow:0 4px 4px #999; -webkit-box-shadow:0 4px 4px #999; box-shadow:0 4px 4px #999; 使用#设...
  • 给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50);我们通常也会遇到,在给...2.父元素div设置为相对定位),兄弟div1(设置为绝对定位)背景正常加透明度即可,兄弟div2(设置为绝对定位),层级
  • ”属性设置元素背景的透明度即可。 本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。 推荐:《css视频教程》 CSS颜色透明度 一、设置元素背景透明度 opacity可以用来设置元素背景的透明度;它需要...
  • 背景图片设置透明度而不改变内容

    千次阅读 2019-05-07 12:13:19
    想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话,会...把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div设置 <view class='item'> <image cla...
  • 当我们做前台Web的时候,为了达到预期的效果,经常需要设置div透明度或者是叠放层级,下面我们就分别来看看如何很好的来使用filter和z-index。 filter 主要语法为:filter: alpha(opacity=80); opacity:0.8; 其中...
  • 问题一: 如何让logo部变成这样: 步骤一:先收一个大的div,上面logo+nav再一个div,...答案:在包住logo+nav的div设置backgroubd-color :rgba(0,0,0,0.3)就可以了 转载于:https://www.cnblogs.com/zhaowenx...
  • 给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50); 我们通常也会遇到,在给父元素背景...2.父元素div设置为相对定位),兄弟div1(设置为绝对定位)背景正常加透明度即可,兄弟div2(设置为...
  • css中opacity透明度的继承问题解决(父元素使用opacity,子元素也变透明) 今天在项目中发现利用...一、父元素不用CSS3来设置透明度,而是设置rgba来设置透明度; <div class="box"> <div class=...
  • 当我们在使用opactity 属性给DIV设置透明度的时候,DIV下的子元素(标签和文字)都会继承父元素的透明度属性,并且无论我们重置子元素的透明度属性情况都不会发生变化,而这往往不是我们想要看到的效果。...
  • 在自己的博客网站放了 Google Adsense 的广告,但是样式和网站整体的风格都不太搭。 1、希望设置正方形的... 降低广告位的透明度div 中居中 修改代码如下: <script async src="https://pagead2.g...
  • js-10*10个div-制作整图碎片化效果

    千次阅读 2017-10-08 22:22:47
    在学会使用js将一个div变成10*10个div组成后,具体参照js-使用js生成10*...其实实现原理很简单,使用Math.random()使每个图片位移值和斜切值为任意值,同时设置图片的透明度,就可以制作出整图碎片化并消失不见的效果。

空空如也

空空如也

1 2 3 4
收藏数 61
精华内容 24
关键字:

如何设置div透明度