I have a div generated by a CMS which includes a background image which I'd like to change the opacity of without effecting the opacity of the div's child elements.
https://jsfiddle.net/L5b81yqo/
HTML
<div class="container">
<p>Some dummy text</p>
</div>
CSS
.container {
background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
width: 100%;
height: 500px;
background-size: cover;
}
Is it possible with CSS to change the opacity of the background image without using psuedo before /after (as this involves using the background URL which I can't use in the stylesheet as it's dynamic from the CMS and could be any URL) or adding additional markup (as the CMS won't let me add further markup).
I've looked at various solutions but all these appear to use the methods I can't use defined above e.g. https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
If it's not possible then that's fine and I can look at a workaround solution.
You can still use pseudo element and inherit the background without the need of the url:
Or like below with a simple background-color layer on the top: