孩子的背景颜色覆盖父母的背景图片

Question

Child's bg color overrides parent's background image

I have a parent image which is required to be put as a backround of whole page. Now if I put background color into a child div, the parent image is not visible. Can I somehow put background color of child behind the parent background image? Is it even possible?

Tried this one: How to display parent's bg-image over child elements bg-color?

Code: https://codepen.io/anon/pen/KazpYM

But the solutions provided doesn't work as I need to put some text in the child div which should be visible over parent background image.

 .athletes{ background-image: url(https://i.imgur.com/Ytf12qW.jpg); background-repeat: no-repeat; -webkit-background-size: 45% 100%; background-size: 45% 100%; background-position: 14%; } .line{ width: 100%; height: 200px; } .line-gray{background-color: #c1c1c1;} .line-violet{background-color: #5e42b0;}

 <div class="athletes"> <div class="line"></div> <div class="line line-gray"></div> <div class="line line-violet"></div> </div>

Answer 1

If you want just the background of child elements to be transparent use rgba(x,x,x,opacity) for color. If you want to have a transparent image on parent use ::after pseudo selector and set opacity of the element. Here is a working example for you.

 .athletes{ width: 100%; height: 100%; display: block; position: relative; } .athletes::after{ top: 0; left: 0; bottom: 0; right: 0; opacity: 0.5; position: absolute; z-index: -1; content: ""; background: url(https://i.imgur.com/Ytf12qW.jpg) no-repeat center center/cover; } .line{ width: 100%; height: 200px; display: flex; color: purple; justify-content: center; align-items: center; background-color: rgba(111,111,111,0.4) } .line-gray{background-color: rgba(222,222,0,0.4);} .line-violet{background-color: rgba(127,177,0,0.4);}

 <div class="athletes"> <div class="line">item1</div> <div class="line line-gray">item2</div> <div class="line line-violet">item3</div> </div>

Hope it helps, comment this answer if something is unclear.

Answer 2

no, you can not! you must to use background color rgba for child's background! with parameter a, you can set opacity for colors!!! then you can see parent background image.