Make parent div transparent but only where the child is
I have a web page with a background image (in my example only red) and a line that needs to have a background color (in my example blue) and 100%.
The problem is that there must be a transparent logo inside the blue bar (fixed width 200px), but it must be transparent to let the background body image pass through (in my example, red).
Example:
body {
background-color: red;
width: 100%;
padding: 0px;
margin: 0px;
}
.row {
width: 100%;
height: 40px;
background-color: blue;
}
.logo {
width: 200px;
height: 40px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 auto;
}
<div class="row">
<div class="logo">
Should be transparent to the red background
</div>
</div>
https://jsfiddle.net/uamgevLo/2/
Any suggestions on how this can be done?
source to share
I don't know if you want this.
https://jsfiddle.net/uamgevLo/5/
You can split a part of a string into 3 parts. left panel, right panel and logo. for the left and right bars I will use a pseudo element (before and after) and the position is absolute
.logo {
width:200px;
height:20px;
margin: 0 auto;
position: relative;
}
.logo::before {
content: '';
width: calc(50vw - 100px);
height: 20px;
position: absolute;
right: 100%;
top: 0;
background-color: blue;
}
.logo::after {
content: '';
width: calc(50vw - 100px);
height: 20px;
position: absolute;
left: 100%;
top: 0;
background-color: blue;
}
source to share
You can achieve this by using flex and splitting the top line into three.
body {
background-color: red;
padding: 0px;
margin: 0px;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 40px;
}
#Lft,#Rgt{
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
background-color: blue;
}
.logo {
-ms-flex: 0 0 200px;
-webkit-box-flex: 1;
flex: 0 0 200px;
background-color: rgba(255, 255, 255, 0.5);
}
<div class="row">
<div id="Lft"></div>
<div class="logo">
Should be transparent to the red background
</div>
<div id="Rgt"></div>
</div>
source to share
You can solve it with linear-gradient
, so you don't need to split .row
into columns:
body {
background-color: red;
width: 100%;
padding: 0px;
margin: 0px;
}
.row {
width: 100%;
height: 40px;
background: linear-gradient(
to right,
blue,
blue calc(50% - 100px),
transparent calc(50% - 100px),
transparent calc(50% + 100px),
blue calc(50% + 100px),
blue
);
}
.logo {
width: 200px;
height: 40px;
margin: 0 auto;
}
<div class="row">
<div class="logo">Should be transparent to the red background</div>
</div>
source to share