На ПК версии сайта непрозрачность на картинках не работает, а на мою версии всё норм

header {
    display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 20;
  height:80px;
  background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
    padding: 10px 10px;
    justify-content: space-between;

}

.container{
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}
.content-wrapper{
  width: 100%;
}
.header__nav {
    position: absolute;
    left: auto;
    display: block;
}
.header__menu {
  display: flex;
  position: relative;
  z-index: 2;
}
.header__menu li {
  list-style: none;
  margin: 0px 0px 0px 36px;
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
}
.header__menu a {
  color: #48515e;
}
.header__menu a:hover {
  color: #ffffff;
}
.content-wrapper{
    margin-top: 78px;
    padding: 10px;
    line-height: 34px;
}
@media(max-width: 767px){
.header__nav {
  display: block;
  position: absolute;
    top: 55px;
    left: 0;
    background: rgba(20,23,28,255);
    box-shadow: #ccc;
    width: 100%;
    box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
    transition: all 0.4s ease;
  left:120%;
}
.header__menu {
  display: block;
  background: rgba(20,23,28,255);
}
.header__nav.open-menu{
    left:0;
    background: rgba(20,23,28,255);
}
.header__menu li {
  margin: 40px 0px 40px -10px;
    font-size: 14px;
  }
.menu-burger__header {
  position: relative;
    width: 40px;
    height: 35px;
    display: block;
    margin-inline-start: auto;
   }
.menu-burger__header span, .menu-burger__header:after, .menu-burger__header:before{
  height: 3px;
  width: 100%;
  position: absolute;
  background: #515758;
  margin: 0 auto;
}
.menu-burger__header span{
  top: 16px;
}
.menu-burger__header:after, .menu-burger__header:before{
  content: '';
}
.menu-burger__header:after{
  bottom: 5px;
}
.menu-burger__header:before{
  top: 5px;
}
.menu-burger__header.open-menu span {
  opacity:0; 
    transition: 0.5s; 
}
.menu-burger__header.open-menu:before {
  transform: rotate(38deg);
    top: 16px;
    transition: 0.4s;
}
.menu-burger__header.open-menu:after {
  transform: rotate(-38deg);
    bottom: 16px;
    transition: 0.4s;
}

.content-wrapper {
    margin-top: 48px;
}
.fixed-pade {
    overflow: hidden;
}
.header__logo {
  display:inline-block;
}
.header__logo img{
  display:inline-block;
}
.nav_logo {
  display:inline-block;
}
.clarity {
opacity:0.5;
filter:alpha(opacity=50);
}

.clarity:hover {
opacity:1;
filter:alpha(opacity=100);
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
  $('.menu-burger__header').click(function(){
        $('.menu-burger__header').toggleClass('open-menu');
        $('.header__nav').toggleClass('open-menu');
        $('body').toggleClass('fixed-page');
  });
});
</script>
<header class = "header"> 
        <a class="header__logo" href="#">
          <img width="120" height="60" src="images/avv5.png">
        </a>
    <div class="container header__container">
        <div class="menu-burger__header">
            <span></span>
        </div>
        <nav class="header__nav">
            <ul class="menu header__menu">
               <li><span class="clarity"><a href="index.html" class="menu__item"><img style="width: 15px;" src="i/glav.png"></span> Главная</a></li>
                <li><span class="clarity"><a href="" class="menu__item"><img style="width: 15px;" src="i/sa.png"></span> Сайты</a></li>
                <li><span class="clarity"><a href="" class="menu__item"><img style="width: 15px;" src="i/vip.png"></span> VIP Сайты</a></li>
                <li><span class="clarity"><a href="" class="menu__item"><img style="width: 15px;" src="i/partner.png"></span> Сотрудничество</a></li>
                <li><span class="clarity"><a href="" class="menu__item"><img style="width: 15px;" src="i/sup.png"></span> Контакты</a></li>
            </ul>
        </nav>
    </div>
</header>