How to make div background color transparent in CSS

前端 未结 6 2043
不知归路
不知归路 2020-12-02 04:21

I\'m not using CSS3. So I can\'t use opacity or filter attributes. Without using these attributes how can I make the background-color

6条回答
  •  夕颜
    夕颜 (楼主)
    2020-12-02 04:59

    It might be a little late to the discussion but inevitably someone will stumble onto this post like I did. I found the answer I was looking for and thought I'd post my own take on it. The following JSfiddle includes how to layer .PNG's with transparency. Jerska's mention of the transparency attribute for the div's CSS was the solution: http://jsfiddle.net/jyef3fqr/

    HTML:

       
       
       
       
       
       
    

    CSS:

    #box {
    background-color: #ffffff;
    height:400px;
    width: 1200px;
    position: absolute;
    top:30px;
    z-index:1;
    }
    #box2 {
    background-color: #ffffff;
    height:400px;
    width: 1200px;
    position: absolute;
    top:30px;
    z-index:2;
    background-color : transparent;
          }
          #box3 {
    background-color: #ffffff;
    height:400px;
    width: 1200px;
    position: absolute;
    top:30px;
    z-index:2;
    background-color : transparent;
          }
     body {background-color:#c0c0c0; }
    

    JS:

    $('#toggle-box').click().toggle(function() {
    $('#box').animate({ width: 'show' });
    }, function() {
    $('#box').animate({ width: 'hide' });
    });
    
    $('#toggle-box2').click().toggle(function() {
    $('#box2').animate({ width: 'show' });
    }, function() {
    $('#box2').animate({ width: 'hide' });
    });
    $('#toggle-box3').click().toggle(function() {
    $('#box3').animate({ width: 'show' });
     }, function() {
    $('#box3').animate({ width: 'hide' });
    });
    

    And my original inspiration:http://jsfiddle.net/5g1zwLe3/ I also used paint.net for creating the transparent PNG's, or rather the PNG's with transparent BG's.

提交回复
热议问题