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.

'https://i.stack.imgur.com/tpTGN.jpg' = (actual image of my code)

'https://i.stack.imgur.com/5WNEA.jpg' = (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;}

If you want a bit transparent background to ".logo-circle"., you can set background-color to the ".logo-circle" with bit darker alpha value of 0.6 or something? — Sivadass N, Feb 16 '17 at 12:29
yeah i have tried, but there is still blur effect.. clarity is missing... — Moiz, Feb 16 '17 at 12:53

score 0 · Answer 1 · answered Feb 16 '17 at 12:29

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>

you can check img url, i have mentioned above... my problem is to remove style from child div... — Moiz, Feb 16 '17 at 12:55

Andy R. · Answer 2 · 2017-02-16T12:41:56.150

0

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);

edited Feb 16 '17 at 12:41

answered Feb 16 '17 at 12:30

Andy R.

21
4

Already tried it... not useful.. can u give me another suggestion.. ? – Moiz Feb 16 '17 at 12:56
Maybe helpful: [Related question](http://stackoverflow.com/questions/20242806/hole-in-overlay-with-css) @Moiz – Andy R. Feb 16 '17 at 13:34

score 0 · Answer 3 · answered Feb 16 '17 at 12:35

0

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;
}

answered Feb 16 '17 at 12:35

grinmax

1,835
1
10
13

Asons · Accepted Answer · 2017-02-17T08:18:22.140

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>

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

4 Answers4