- This topic is empty.
-
AuthorPosts
-
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 #157554Paulie_D
MemberBasically…No….it’s not possible.
December 2, 2013 at 5:32 am #157560Ij
Participantmost 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 #157566Paulie_D
MemberNope. 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 #157572Senff
Participant:D
December 2, 2013 at 8:09 am #157574Tom Houy
ParticipantI 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 #157602ata8
Participantactually 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 #157603Paulie_D
MemberThen the answer is to set the background of
box2
totransparent
as well.Unfortunately, barring other information…we cannot help further.
December 2, 2013 at 10:19 am #157608ata8
ParticipantAs you see “box2” has his own background and cant set box2 a transparent background.
December 2, 2013 at 10:26 am #157609Senff
ParticipantThis 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 #157611ata8
ParticipantI think css failed in this combat.
December 2, 2013 at 11:36 am #157614Paulie_D
MemberCSS 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 #157618ata8
ParticipantOk 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 #157670ata8
Participantthis is great and solve my problem.
thanks man you did great job.December 3, 2013 at 6:00 am #157682Senff
ParticipantSo what happened to this?
As you see “box2″ has his own background and cant set box2 a transparent background.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.