Замените img используя только CSS и не можете изменить HTML

Question

Я работаю над проектом, который имеет 2 разных CSS, один светлый и один темный.И несколько изображений находятся внутри тега <img>, и мне нужно изменить их цвета, используя только css, так как я НЕ РАЗРЕШЕН ИЗМЕНИТЬ HTML ИЛИ JAVASCRIPT

Итак, я подумал об использовании их идентификатора дляперекрывать их.Я на самом деле получил изображение, чтобы быть на том же месте, однако, за исходным изображением.

Есть идеи?

HTML

<div id="div-icones" style="width: 164px;">

<ul id="ulIcones" class="icones">
    <li>
        <a href="#" class="" title="Trocar para a versão simplificada" onclick="ChangeVersionHB('min');">
            <img title="Trocar para a versão simplificada" id="imgChangeVersion" src="images/ico_hb_min.png" width="16" height="16">
        </a>
    </li>
    <li>
        <a href="#" class="" title="Salvar Configuração" onclick="saveCfg();">
            <img title="Salvar Configuração" id="imgSave" src="images/ico_sv.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Restaurar Configuração Padrão" onclick="resetCfgDefault();">
            <img title="Restaurar Configuração Padrão" id="imgConfDefault" src="images/folder_image.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Bloquear funções de Layout" onclick="oSTBroker.fixLayout();">
            <img title="Bloquear funções de Layout" id="imgCadeado" src="images/lock_open.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Configuração do Cliente" onclick="showCfgCli();">
        <img title="Configuração do Cliente" id="imgCliCfg" src="images/ico_cg.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Teclas de Atalho" onclick="showHotkeys();">
        <img title="Teclas de Atalho" id="imgHotkeys" src="images/ico_hk.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Manual" onclick="AbrePagina(ConfigHB.urlManual, 'WINmn', '', 'no', 'yes', '780', '560', false);">
        <img title="Manual" id="imgAjuda" src="images/ico_aj.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Seleciona CSS" onclick="AbrePagina('LstEstilos.aspx', 'LstEstilos', '', 'no', 'yes', '780', '300', false);">
            <img title="Selecione o layout" id="imgSelCss" src="images/ico_ml.png" width="16" height="16">
        </a>
    </li>
</ul>

Мой CSS для изменения изображения

#imgChangeVersion {

box-sizing: border-box;
background: url(images/ico_hb_minc.png);
background-size: 16px;

}

Answer 1

Похоже, вам следует использовать решение, которое было описано в некоторых комментариях к исходному вопросу, вместе с селекторами css, такими как nth-of-type () или nth-child (), поскольку ваши <a> теги не имеютклассы.

img {
   display: none;
}
a:nth-of-type(){
   background-image: url('');
   width: 16px;
   height: 16px;
}

Ознакомьтесь с селектором n-го типа и селектор n-го ребенка

Также рассмотрите возможность использования +селектор для нацеливания <a> элементов непосредственно внутри <li> элементов, таких как:

li + a:nth-of-type(){
    background-image: url('');
    width: 16px;
    height: 16px;
}

В обоих этих решениях обязательно поставьте число в скобках после n-го типа, то есть nth-of-type(3)нацелиться на 3-й элемент.

Answer 2

Поскольку вы не можете иметь псевдоэлементы с тегом <img> (хотя это может работать в некоторых браузерах, но это, безусловно, нестандартно).Поэтому вам придется использовать родительские селекторы, если они имеют уникальные классы, идентификаторы или атрибуты.

В вашем примере все <a> имеют разные значения title.Таким образом, вы можете сделать:

a[title="Trocar para a versão simplificada"] {...}
a[title="Trocar para a versão simplificada"] img {...}

a[title="Salvar Configuração"] {...}
a[title="Salvar Configuração"] img {...}

Вы можете скрыть img, применив display:none (свернуть) или visibility:hidden (оставить пробел).

Затем применить фоновое изображение для каждогоa, вы, вероятно, также хотите установить его на display:block или inline-block и дать ему width и height.

Answer 3

Попробуйте использовать свойство content, например:

#imgChangeVersion {
box-sizing: border-box;
content:url(images/image.png); /* change image here */
background-size: 16px;
}

JSFiddle