CSS Background-image layer add by CSS - html

Question

I have a DOM element:
<div style="background-image: url(layer1.png)">...</div>
I want to add next layer using CSS:
div {
background-image: url('layer2.png'),radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
}
As a result i need to have DIV with all 3 layers as a background image.
Is it possible by pure HTML5 CSS3?

Answer 1

Inline styling totally replaces the properties defined by CSS for that element.
What you can do is create a parent element and child elements as layers, then layer it with the help of z-index and then use opacity to give it some transparency.
HTML
<div class="layers">
<div class="layer1" style="opacity: 0.2; background-image: url(foo.png);"> </div>
<div class="layer2" style="opacity: 0.4;"></div>
<div class="layer3" style="opacity: 0.2;"></div>
</div>
CSS
.layers{
position:relative;
width: 100px;
height: 100px;
}
.layer1, .layer2, .layer3{
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
}
.layer1{ background-color: red; z-index: 0;}
.layer2{ background-color: orange; z-index: -1;}
.layer3{ background-color: pink; z-index: -2; }
JsFiddle

Answer 2

No, it's not possible. What will happen:
Your div {} rule has lower priority than inline css, so your inline css background-image will overwrite previous rule, not be appended to it.
Solution:
Use child element or :before/:after to apply layer1.png
.wrapper {
height: 200px;
width: 300px;
background-image: radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
position: relative;
}
.wrapper div {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
}
body {
background-color: black;
}
<div class="wrapper"><div style="background-image: radial-gradient(rgba(0, 255, 0, 0.85) 10%, rgba(0, 245, 0, 0.19) 75%, rgba(0, 245, 0, 0) 90%);"></div></div>