2

Im trying to make part of a div transparent so the transparent part can show the background pattern ( a complicated one made with css). So i have a view_main div and 2 other small divs , divs that will be transparent and show the background

#View_main{
 margin-left:7%;
 top: 15%;
 height:100%;
 width:70%;
 background-color:white;
 position:relative;
 border:0;
 z-index:1;
}

the left_space div

#left_space{
 height:12%;
 width:12%;
 background-color:transparent;
 margin: auto;
 position: absolute;
 top: 0; left: -100%; bottom: 0; right: 0;
}

the right_space div

#right_space{
 height:12%;
 width:12%;
 background-color:red;
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: -100%;
}

i have tried to make the left_space with z-index=2 and the view_main z-index=1 and still nothing , Here is a simple example, i im trying to show the background (in this case is green but in my code is a pattern ,or image) from the left_space div I have also tried the opacity but still nothing! does someone have any idea?

here it is a visual rapresentation enter image description here

8
  • 1
    Why don't just set the same background pattern to left_space div? Or try looking into CSS mask property thenittygritty.co/css-masking Oct 29, 2013 at 10:19
  • approach you followed is too complicated instead you can remove unnecesary div and portion part you want to make transparent is little difficult. Oct 29, 2013 at 10:45
  • @Teo Dragovic because the background is like a grid and if i made the left space with the same bacground the pattern will not show correctly ,also im trying to make my code css only with no image :/
    – Andi Domi
    Oct 29, 2013 at 11:12
  • @Shaib Chikate i cant understand you , what do you mean remove unnecessary div?
    – Andi Domi
    Oct 29, 2013 at 11:13
  • @p3rand0r Are space div's necessary for some content or are you just trying to get blue shape? If you're just using div's for styling you can accomplish same thing with pseudo-classes. Here's example: codepen.io/teodragovic/pen/KhgeJ Oct 29, 2013 at 11:51

4 Answers 4

4

Here's code for creating blue shape using before and after pseudo-classes

body {
  background-color: green;
}

.container {
  margin: 50px auto;
  height: 300px;
  width: 210px;
  background-color: blue;
  position: relative;
}
.container:before, .container:after {
  content: "";
  height: 44%;
  position: absolute;
  background-color: blue;
  z-index: -1;
  width: 112%;
  left: -6%;
}
.container:before {
  top: 0;
}
.container:after {
  bottom: 0;
}

DEMO

0

Use opacity property in the div that you want to make transparent and set its value from 0.1 to 1

Reference Link on w3cschools

From your above diagram and link to code provide by you I modified your code to get that structure:

<!DOCTYPE html>
<html>

<style>
  body{
    background-color:green;
  }
  #View_main{
    margin-left:7%;
    top: 15%;
    height:300px;
    width:210px;
    background-color:blue;
    position:relative;
    border:0;

}

#left_space{
    height:12%;
    width:12%;

    background-color:green;
    margin: auto;
    position: absolute;
    top: 0; left: -88%; bottom: 0; right: 0;
    opacity:1;
}


 </style>
 <body>

 <body><div id="View_main">


 <div id="left_space"></div>
 </div>
 </body>

  </body>
 </html>
6
  • Use opacity:0.1 which will give you transparent background and you have use 1 which is no transparent value Oct 29, 2013 at 9:54
  • You have added opacity:0.1 to div which you want to see and to div you want to be transparent. Check you code once again. Its working for me bro. #right_space{ opacity:0.1} Oct 29, 2013 at 9:58
  • can you please show me the code? i cant seem to do it by myself i have tried to add the opacity to all the single divs but still nothing , i cant see the green background from my left_space div :(
    – Andi Domi
    Oct 29, 2013 at 10:04
  • no this doesnt show me my background, maybe you didnt understand me , or i didnt make my self clear , i need to make left_space completely transparent and show the green background and make a "hole" in the blue div in my case view_main :/
    – Andi Domi
    Oct 29, 2013 at 10:11
  • I m still not understanding you tell me which color you want to make it transparent...dont say the div just say me the color. Oct 29, 2013 at 10:18
0

I can refer you,

That the #right_space you can give green color

http://jsfiddle.net/5BZdF/3/

Check this

1
  • 1
    Thank you for your reply , but the main porpoise of that jsfiddle link was to show the main idea , the background is not green in my original code , its a picture or a pattern , so i cant make the right_space green as the background behind it its a picture :/
    – Andi Domi
    Oct 29, 2013 at 11:08
0

You can use a transparent box with a large box-shadow drawn with :before or :after pseudo elements.

HTML:

<div id="View_main"></div>

CSS:

#View_main {
  position:relative;
  overflow: hidden;
  height:300px;
  width:210px;
}

#View_main:before {
  box-shadow: 0 0 0 1000px blue;
  position: absolute;
  margin-top: -40px;
  content: '';
  height: 80px; /* Change width and height to increase or decrease transparent box area */
  width: 20px;
  opacity: 1;
  top: 50%;
  left: 0;
}

body{
  background-color:green;
}

#View_main {
  position:relative;
  overflow: hidden;
  margin-left:7%;
  height:300px;
  width:210px;
  border:0;
  top: 15%;
}

#View_main:before {
  box-shadow: 0 0 0 1000px blue;
  position: absolute;
  margin-top: -40px;
  content: '';
  height: 80px;
  width: 20px;
  opacity: 1;
  top: 50%;
  left: 0;
}
<body>
  <div id="View_main"></div>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.