Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to cut a part of div

Tags:

css

I try to give you a broad picture of my problem. Suppose I have a overlay div on my page with z-index: 99;, with background-color: rgba(0,0,0,0.5). Then I want to remove a part of overlay div, for example 100 x 100px in top: 50px; and left: 200px;.

By removing I mean that exclude a part of overlay div to make that part visible and remove the background-color from that.

How can I do that?

like image 617
Afshin Mehrabani Avatar asked Mar 10 '13 06:03

Afshin Mehrabani


People also ask

How do you split a div in HTML?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.


1 Answers

I'm not sure you can remove part of the background like you describe. Instead, your overlay can have a transparent background and it can contain four blue-ish-background divs that form a frame around the hole you want.

Here's some code that does this:

body {margin: 0; padding: 0}
#main {width: 500px; height: 200px; background: yellow;}
.overlay {background: rgba(0,0,0,0.5); position:absolute;}
#overlay-container { width: 500px; height: 200px; z-index: 99; position: absolute;}
#top {width: 100%; height: 50px}
#left {top:50px; width: 200px; height: 100px}
#right {left: 300px; width: 200px; height: 100px}
#bottom {left: -300px; top: 100px; width: 500px; height: 50px}
<div id="main"/>
<div id="overlay-container">
    <div class="overlay" id="top"/>
    <div class="overlay" id="left"/>
    <div class="overlay" id="right"/>
    <div class="overlay" id="bottom"/>
</div>

You can probably get rid of the overlay-container and simplify things a bit.

For the overlay, you could just use a <div> with a transparent background and a translucent border. Here's another example:

body { margin: 0; padding: 0; }
#background {
    width:500px;
    height:200px;
    background: yellow;
}
#overlay {
    border-color: rgba(0,0,0,0.5);
    border-style: solid;
    border-top-width: 50px;
    border-left-width: 200px;
    border-right-width: 200px;
    border-bottom-width: 50px;
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
}
<body>
    <div id="background">some content</div>
    <div id="overlay"></div>
</body>
like image 80
Ted Hopp Avatar answered Sep 30 '22 03:09

Ted Hopp