精华内容
下载资源
问答
  • 在设置div透明度的时候发现设置了父div透明度(opacity=0.5),子div透明度也随着改变了,并且设置子div透明度不起作用,这种情况下可以使用rgba来设置父div透明度:例如设置div黑色半透明,可以设置div的...
    在设置div的透明度的时候发现设置了父div的透明度(opacity=0.5),子div的透明度也随着改变了,并且设置子div的透明度不起作用,这种情况下可以使用rgba来设置父div的透明度:例如设置div黑色半透明,可以设置div的background:rgba(0,0,0,0.5)
    展开全文
  • 设置DIV透明

    2014-06-12 17:05:25
    设置DIV样式的样式代码: filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; (放置在style=""属性里) 说明: 1、 filter :对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%...

    设置DIV样式的样式代码:filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; (放置在style=""属性里)

    说明:
    1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认
    2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50%
    3、opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明



    展开全文
  • css实现遮罩层,父div透明,子div不透明 使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; 1 2 3 4 <div style="wid...
    
    

    随笔- 1021  文章- 1  评论- 24 

    css实现遮罩层,父div透明,子div不透明

    使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3;

    1

    2

    3

    4

    <div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;opacity:0.3;text-align:center">

          <div style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf

          </div>

    </div>

      

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。

     可以使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?使用RGBA。

     

    1

    2

    3

    4

    <div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;background: rgba(0, 0, 0, 0.5);text-align:center">

    <div style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf

    </div>

    </div>

      

    解释:这是黑色半透明的代码(设置背景色 同时设置opacity(透明度,取值范围0-1))

         前三个值表示颜色的red,green,blue值

         最后一个表示alpha值,就是透明度值,不透明为1

         (支持IE8+以及所有现代浏览器)

    父级div 使用rgba ,效果可以了,如下图;

     

     

    怎么实现父级div透明,子div不透明呢?下面这个代码片段还可以参考:

    原文: http://www.cnblogs.com/mxw09/archive/2011/09/27/2193238.html

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>

        <style type="text/css">

            <!--

            body,td,th {

                font-size: 12px; padding:0; margin:0;

            }

            .tanchuang_wrap{ width:600px; height:400px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}

            .lightbox{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}

            .tanchuang_neirong{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}

            -->

        </style>

        <script language="javascript">

            function closeDiv(divId){

                document.getElementById(divId).style.display = 'none';

            }

            function displayDiv(divId){

                document.getElementById(divId).style.display = 'block';

            }

        </script>

    </head>

    <body>

    <div style="width:400px; height:400px; position:relative; text-align:center;">

        <div class="tanchuang_wrap" id="aaaa">

            <div class="lightbox"></div>

            <div class="tanchuang_neirong">

                <p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p>

                这里是弹窗内容

            </div>

        </div>

        <span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>

        <p>测试通过,兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>

    </div>

    </body>

    </html>

      效果如下图:

    展开全文
  • HTML5中实现滑动条调节div透明

    千次阅读 2016-03-11 09:47:23
    实现通过调节滑动条来控制div透明度的值,首先是滑动条控件的使用,滑动条值改变的触发事件,获取滑动条的值,改变div透明度的值等。 HTML5滑动条控件 实际上是type=range的input标签: type = range:设置...

    @实现通过调节滑动条来控制div透明度的值,首先是滑动条控件的使用,滑动条值改变的触发事件,获取滑动条的值,改变div透明度的值等。


    HTML5滑动条控件

    实际上是type=rangeinput标签:

    type range:设置滑动条控件

    max:滑动条的最大值

    min:滑动条的最小值

    value:当前的值(开始的默认值)

    step:滑动中的增幅,步长

    onChange:滑动控件值改变的触发事件,触发后面的函数,里面的参数this.value可以传入这个控件的当前值


    div的透明度设置

    div的透明度属性为opacity:

    #bg{
    height:300px;
    width:500px;
    background-color:#60F;
    opacity:0.5;}


    动态控制div透明度

    var bg = document.getElementByIdx_x('bg');
    function changeBg(value){
    bg.innerHTML= value.toString();
    bg.style.opacity = value;
    }




    展开全文
  • 那你知道如何设置div透明度吗?下面是学习啦小编给大家整理的一些有关设置div透明度的方法,希望对大家有帮助!设置div透明度的方法1.样式代码#layout { position:absolute; top:50px; width:500px; background:#fff; ...
  • css+div透明参数设置

    千次阅读 2016-12-09 08:13:28
    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: CSS 123456.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-...
  • h5 range应用 透明度+RGB

    千次阅读 2016-06-29 18:59:09
    h5 range应用 透明度+RGB 透明度 DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../js/jquery.min.js" type="text/javascript">script> script
  • div背景色半透明

    2015-05-27 13:49:15
    可实现div背景色半透明,不是用的filter:alpha(opacity=50);opacity:0.5;属性,而是用的rgba(0,0,0,0.5),如果用的filter:alpha(opacity=50);opacity:0.5;那么它有个缺点,就是这个div里边的所有子元素也会有半透明...
  • 在IE中需要通过"filter"来定义透明度"opacity",而在...css设置div透明度说明:1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认识。2、-moz-opacity:对moz...
  • H5滑动其他位置隐藏div

    千次阅读 2017-04-01 18:00:43
    有时候做移动端做导航栏显示,只有在点击其他区域才会隐藏。 在移动端会有bug 问题重现,有时候移动端...做一个遮罩层,在一下称遮罩层为A。 将A的透明度设为0;并将其position设置为fixed;并将B 置到A的下方。 (d
  • h5中css利用div画简易多边形

    千次阅读 2017-10-30 12:07:19
    /*设置左边框的颜色,因为上面设置的全透明,此时只能见到设置了颜色的一边,便是一个三角形*/ } style > head > < body > < div class = "triangle" > div > body > html > 效果如图 ...
  • DIV重叠 对父级使用position:relative,对子级使用position:absolute、z-index(重叠顺序) left,right,top,bottom绝对定位相当于父级具体位置
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; ...
  • Html5 CSS样式设置div背景色透明

    万次阅读 2018-06-01 16:49:43
    今天写H5的时候,加了一个背景图片,但是有几个div是白色的,显然遮挡了Html5 CSS样式设置div背景色透明&lt;div style="background-color:transparent;"&gt; ....&lt;/div&gt;...
  • 这些经常不用的css,透明设置不经常用,因为在做平面的时候是看不出来的。而且单词也比较难记的就很容易忘记,用过之后就忘记了。所以我写篇博客记录一下用的这段代码:图层半透明,图层上文字不透明:background:...
  • 前端页面,给div标签设置透明

    千次阅读 2018-08-23 16:43:09
    近段时间在学习使用一些前端的知识,在使用一些开源的前端开源特效的时候,发现网页特效被前端的div块儿所遮挡。  代码如下:    &amp;lt;div class=&quot;jumbotron&quot; style=&...
  • 由于父级div使用了opacity设置透明度,使子级div也继承了透明度 我的解决方法是使用rgba,background-color:rgba(245,224,199,0.7),0.7是透明度,由于rgba是css3的属性,所以必须是支持css3的浏览器才能支持rgba ...
  • 在原页面的基础上添加两个div,一个是弹出层,一个是遮罩层,即背景层。这两个div和原始页面是在一个文件中,首先通过设置display:none;让这两个div不显示,然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的...
  • 我通过以下链接通过克隆一个div来实现代码如下:elemDragStart(event) {event.dataTransfer.effectAllowed = 'move';var crtElem = event.currentTarget.cloneNode(true);crtElem.style.backgroundColor = "red";...
  • 在做微信公众号H5页面时,需求要求html页面生成base64图片,并保存到手机相册中。之前没做过,在网上搜了相关的资料。了解到了html2canvas.js。 html2canvas首先将页面生成canvas画布,然后转换成base64图片。最后...
  • h5

    2018-12-13 16:57:43
    : 替换H5标准API配置信息 WebviewStatusbarStyles : JSON对象,Webview窗口的系统状态栏区域样式 WebviewStyles : JSON对象,Webview窗口对象的样式 WebviewTransform : 一组用于定义页面或控件变形的属性 ...
  • H5

    2019-02-25 19:23:21
    H5学习 1、h5的语义化标签: &lt;header&gt;&lt;/header&gt; &lt;footer&gt;&lt;/footer&gt; &lt;hgroup&gt;&lt;/hgroup&gt; &lt;nav&gt;&lt;/nav&...
  • Loading 其中: opacity: 0.4;filter:alpha(opacity=50) opacity: 0.4 设置的是FireFox下面的透明效果; filter:alpha(opacity=50) 设置的是IE下面的透明效果;
  • html> lang="en"> charset="UTF-8"> div.img{ float:left; padding:5px; margin:5px; border: 1px solid; border-color: dimg
  • 可拖动、可关闭、透明标题DIV百变窗口 .mask{position: absolute; top: 0px; left: 0px; filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background-color: #ffffff; z-index: 2; display:...
  • div class="fixbox" style="display: none; position: fixed; top: 50%; left: 50%; background: #000; opacity: .8; transform: translate(-50%,-50%); width: 200px; height: 50px; border-radius:...
  • h5干货

    2018-12-04 15:32:33
    1.reset.css html, body, div, span, applet, object, ...h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, str...
  • DIV半通明完成,运用CSS完成DIV成半透明效果,CSS实现层与后台半通明成果。一、DIV CSS半通明底子介绍设置装备摆设DIV半通明CSS代码:div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;}阐明: 1、filter...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,067
精华内容 3,226
热门标签
关键字:

h5div透明