having a translucent background without affecting its containing elements
I basically want to overlay the web template on the background image and reduce the opacity of the web template because I want the background to be slightly visible, now I will quickly go through the documentation revealing the following:
Syntactically a <number>. A single opacity setting for the entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped in that range. If the object is a container element, then the effect looks as if the contents of the container element were blended with the current background using a mask, where the value of each pixel in the mask is <alphavalue>. W3C
now i have the following code:
CSS and HTML ::
html,body {
height: 100%;
}
.wrapper {
position: relative;
display: table;
width: 100%;
height: 100%;
background: url(http://www.zastavki.com/pictures/1920x1200/2011/Space_Huge_explosion_031412_.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
}
.wrapper * {
width: 100%;
height: 100%;
}
.dell {
display: table-cell;
vertical-align: middle;
background: url(http://image.clipdealer.com/1140524/previews/18--1140524-Electronic%20dots%20Background,particle,mosaics,puzzle,tech%20communication,web%20enery,disco%20neon,game,grid,weaving,textile,pattern,symbol,vision,idea,creativity,vj,beautiful,art,decorative,mind,Geometry,mathematics,computing,graphics,fun,Game,Led,neon%20lights,mo.jpg);
opacity: 0;
}
.orange {
margin-right: auto;
margin-left: auto;
background: orange;
height: 200px;
width: 200px;
}
<div class="wrapper">
<div class="dell">
<div class="orange">
</div>
</div>
</div>
now the opacity achieves the goal of showing the background, but of course the content .dell
becomes translucent, now is there a solution for this where I can have a show through the background without having the content .dell
getting translucent?
I would prefer not to link the background and the semi-transparent pattern in order to combine them together.
source to share
Please check this: http://jsfiddle.net/7xo353hg/8/
.dell:after{
width:200px;
content:'';
height:200px;
position:absolute;
left:50%;
top:0;
margin-left:-100px;
background:orange;
opacity: .5;
z-index:0;
display:block;
}
source to share