Replace a img using only CSS and cannot change HTML - html

Question

I'm working on a project that has 2 different CSS, one light and one dark. And a few images are inside the <img> tag, and I need to change their colors, only using css, since I'M NOT ALLOWED TO CHANGE HTML OR JAVASCRIPT
So, I thought on using their ID to overlap them.
I actually got the image to be on the same place, however, behind the original image.
Any ideas?
The 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>
My CSS to change the image
#imgChangeVersion {
box-sizing: border-box;
background: url(images/ico_hb_minc.png);
background-size: 16px;
}

Answer 1

Since you cannot have pseudo elements with <img> tag (although it might work in some browsers, but it's certainly non-standard). So you'll have to use parent selectors if they have unique classes, ids or attributes.
In your example, all the <a> have different title values. So you can do:
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 {...}
You can hide the img by applying display:none (collapse) or visibility:hidden (keep space).
Then apply background image on each a tag, you probably also want to set it to display:block or inline-block and give it some width and height.

Answer 2

Try using the "content" property, like so:
#imgChangeVersion {
box-sizing: border-box;
content:url(images/image.png); /* change image here */
background-size: 16px;
}
JSFiddle

Answer 3

Sounds like you should use the solution that was described in some of the comments on the initial question along with css selectors like nth-of-type() or nth-child() since your <a> tags don't have classes.
img {
display: none;
}
a:nth-of-type(){
background-image: url('');
width: 16px;
height: 16px;
}
Read up on the nth-of-type selector and nth-child selector
Also consider using + selector to target <a> elements immediately within <li> elements such as:
li + a:nth-of-type(){
background-image: url('');
width: 16px;
height: 16px;
}
In both of these solutions make sure to put a number inbetween the parentheses following nth-of-type, i.e. nth-of-type(3) to target the 3rd element.