Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Is this possible?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 2, 2013 at 3:15 am #157548
    ata8
    Participant
        .box1{
        width: 400px;
        height: 400px;
        padding: 50px;
        background-color: red;
        float: left;
    }
    .box2{
        width: 400px;
        height: 400px;
        background-color: blue;
        float: left;
    }
    .box3{
        width: 400px;
        height: 400px;
        background-color: transparent;
    }



<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

    i want ‘box2’ background did not show when i set box3 background to ‘transparent’;

    December 2, 2013 at 5:10 am #157554
    Paulie_D
    Member

    Basically…No….it’s not possible.

    December 2, 2013 at 5:32 am #157560
    Ij
    Participant

    most definitely man, anything is possible with css these days- if only you know enough. So I just ran your code snippet, however I suggest you change
    background-color: transparent; to background-color: rgba(0,0,0,x); where x can be any value from 0.1, 0.2, 0.3,…, to 1.0.

    Mayhaps also tell us what you want to achieve..

    December 2, 2013 at 6:59 am #157566
    Paulie_D
    Member

    Nope. Setting the background colour to transparent will always allow the colour of the parent element through.

    So….. Not possible based on stated request.

    December 2, 2013 at 7:51 am #157572
    Senff
    Participant

    :D

    December 2, 2013 at 8:09 am #157574
    Tom Houy
    Participant

    I don’t quite understand what you are asking. If you want both box 2 and box 3 to be transparent, then set them both to transparent. Did you mean that you want box 2 to become transparent as well when an event such as a hover occurs within box 3?

    December 2, 2013 at 10:01 am #157602
    ata8
    Participant

    actually i brought you an example from a problem that i stuck.
    I just want when i set the “box3” to transparent (or any other solution !?) see the “box1” background(one step before parent element).

    thanks any way to your response.

    December 2, 2013 at 10:06 am #157603
    Paulie_D
    Member

    Then the answer is to set the background of box2 to transparent as well.

    Unfortunately, barring other information…we cannot help further.

    December 2, 2013 at 10:19 am #157608
    ata8
    Participant

    As you see “box2” has his own background and cant set box2 a transparent background.

    December 2, 2013 at 10:26 am #157609
    Senff
    Participant

    This is like putting three layers of paper on top of eachother.

    The bottom layer (box1) is red.
    The middle layer (box2) is blue.
    The top layer (box 3) is transparent.

    Obviously, in this situation, you will see BLUE. And the only way to see the red, is when the two top layers (box2 and box3) are BOTH transparent.
    If you can’t change box2, then there’s no way to make box1 visible.

    December 2, 2013 at 10:32 am #157611
    ata8
    Participant

    I think css failed in this combat.

    December 2, 2013 at 11:36 am #157614
    Paulie_D
    Member

    CSS worked perfectly…it’s just that it can’t do what you want it to.

    Of course, if you could explain what it is you are trying to achieve and why we might be able to offer alternatives.

    December 2, 2013 at 12:27 pm #157618
    ata8
    Participant

    Ok here is the situation that i stuck in.

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    *{
    margin: 0;
    padding: 0;
    }

body{
    background-color: #F75252;
    background-image: -webkit-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image: -moz-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image: -o-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -o-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -o-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -o-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image: -ms-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -ms-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -ms-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -ms-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image:   linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    -webkit-background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
    -moz-background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
    background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
}


header{
    width: 100%;
    height:60px;
    background-color: #222;
}


#menubar{
    width: 1200px;
    margin:auto;
}

ul,li{
    list-style: none;
    text-align: left;
}

ul li{
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 10px;
}


li a{
    text-decoration: none;
    display: block;
    font-family: Arial;
    color: #fff;
    line-height: 60px;
}

li a:hover,
li.active a{
    background-color: transparent;
}


</style>

</head>
<body>

<header>
    <nav id="menubar">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">About us</a></li>
        </ul>
    </nav>
</header>

</body>
</html>

    I want “active” class and “hover” state has no black background and show the “body” background.

    December 3, 2013 at 2:47 am #157670
    ata8
    Participant

    this is great and solve my problem.
    thanks man you did great job.

    December 3, 2013 at 6:00 am #157682
    Senff
    Participant

    So what happened to this?

    As you see “box2″ has his own background and cant set box2 a transparent background.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.