how to change an image with pure css in the nav bar when scrolling?

Question

I've already change the text color of the links when the nav-bar changes its state to fixed. I was reading an answer before but it doesn't work: Is it possible to set the equivalent of a src attribute of an img tag in CSS?

The following code shows the location of "logo.png" the image that's intended to change when scrolling. thanks

<div class="logo-box">                             
    <div class="logo">
        <a href="#">
            <img src="images/logo.png" alt="">
        </a>
    </div>
</div>

Answer 1

nevermind, I just resolved by myself, I was forgetting to put the attribute of fixed nav bar = equals to scrolling.

.main-header.fixed-header .main-box .logo-box .logo img{
    height: 50px;
    content: url("../images/logo.png") !important;
}