How to remove style from child div using css or js?

Question

I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element... i have posted images as well for better assistance.

' http://imgur.com/a/YxipO ' = (actual image of my code)

' http://imgur.com/a/7ltDa ' = (what i want to do using css or js)

.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}

.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}

Answer 1

You may consider following example approach:

 .content { height: 200px; width: 200px; position: relative; } .banner-inner { background-color: rgba(0, 0, 0, 0.2); padding: 3%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .logo-circle { width: 1em; border: 7px solid #fff; border-radius: 50%; padding: 1em; z-index: 2; height: 1em; position: absolute; top: 50%; margin-top: -1.5em; left: 50%; margin-left: -1.5em; } 

 <div class="content"> <div class="banner-inner"></div> <div class="logo-circle"></div> </div> 

Answer 2

You could use the same picture (as seen in the background) as background in .logo-circle . And set the position of the image like this: background-position: center;

or:

Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden; . For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);

Answer 3

For background in circle use RGBA

.logo-circle {
  background: rgba(0, 0, 0, 0.2);
  width: 15%;
  border: 7px solid #fff;
  border-radius: 50%;
  padding: 16px;
}

Answer 4

You can use a box shadow, like this

 .content { height: 200px; width: 300px; position: relative; background: url(http://lorempizza.com/500/350/); background-size: cover; } .logo-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1000px rgba(255,255,255,0.5); /* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent opacity inside circle */ } 

 <div class="content"> <div class="logo-circle"></div> </div>