CSS: Colored div with transparent box [duplicate] - html

Question

This question already has answers here:
turning a div into transparent to see through two containers
(4 answers)
Closed 6 years ago.
Is there any way to have a div with a background-color that takes up 100% width and a transparent box inside it that shows the original background?

Answer 1

Solution 1: Clip-path
Clip path can be quite useful, as it keeps the code clean and simple. However, it does not have great support (yet) in browsers, and should hence only be used in test environments.
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
height: 300px;
width: 100%;
background: tomato;
position: relative;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 50% 0, 50% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 50% 20%, 50% 0);
}
<div>
</div>
Solution 2: Box shadow Trick
The box shadow trick uses a pseudo element and overflow:hidden; to create the box shadow/colouring of the element.
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
height: 300px;
width: 100%;
overflow:hidden;
position: relative;
}
div:before{
content:"";
position:absolute;
top:20%;width:60%;height:60%;left:20%;
box-shadow:0 0 0 999px tomato;
}
<div></div>
Solution 3: Gradients
You could use multiple gradient background, however this may or may not be suitable as gradients don't always turn out rendered very nicely:
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
position: relative;
height: 300px;
width: 100%;
background: linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato);
background-size: 100% 20%, 20% 100%, 100% 20%, 20% 100%;
background-position: left bottom, right bottom, left top, left top;
background-repeat: no-repeat;
}
<div></div>
Solution 4: Borders
Whilst this may or may not be suitable for you, there is still a chance that it may help, so will post here anyway:
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
position: relative;
height: 300px;
width: 100%;
box-sizing: border-box;
border-left: 20vw solid tomato;
border-right: 20vw solid tomato;
border-top: 50px solid tomato;
border-bottom: 50px solid tomato;
}
<div></div>
Solution 5: Background attachment
I have recently come across the background-attachment property, so am still coming to grips with it. However, if you wished the background to appear behind you may be able to alter the below snippet to your needs:
body {
background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
background-attachment: fixed;
}
.wrapper {
width: 100%;
height: 300px;
background: tomato;
position: relative;
}
.inner {
width: 80%;
height: 80%;
background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
background-attachment: fixed;
position: absolute;
top: 10%;
left: 10%;
box-sizing:border-box;
border:2px solid black;
}
<div class="wrapper">
<div class="inner"></div>
</div>

Answer 2

You're going to need two div for that. A parent, with the red background, then the inner div.
give the inner div margin: 10px auto; as a start.