How to set a semi transparent "picture/image" into black and white, without affecting child elements and background color?

Question

I know that some say that you should use background rgba(0, 0, 0, 0.5); like that, but that is only for color, not pictures and it also does not remake the picture into black and white.

I am asking for background picture transparency and black and white transformation and I know I could use for example opacity: 0.5; for picture background, but that also makes the text withing the box transparent too and it does not make it black and white either.

I only want the background picture of the div box to be semi transparent and transform into black and white at the same time, maybe it is two different codes for it.

I know of the solution that I could use 2 div boxes inside each other were one has the semi transparent background and another the text that way not effecting the opacity of one box to the other, but I wonder if there is a solution to only use one div box for both background and text without effecting the text when using semi transparency plus color or opacity on the background image.

For example if there was something similar to like:

background-opacity: 0.5;

or

background-image-opacity: 0.5;

Although I know that does not exist in CSS, so some solution to that please?

UPDATE: My CSS used now:

#LinksLayer1
        { position:absolute; left:0px; top:-8px; width:100%; height:100%; z-index:3; }

.TDOnLinks
        { font: 12px Arial, Helvetica, sans-serif; }

.TDLinks
        { background-Color: #EEF4FD; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image:url('../Pictures/2/P_13.jpg'); }

Works well as #LinksLayer1 is one box (the outer box) that contains .TDOnLinks tables and fonts for it, then the .TDLinks table is with the background. But as you understand and I know, it does not give a transparent background.

Simplified my HTML and JavaScript code:

<script language="JavaScript">
function moveover(txt){
    window.status = txt;
}

function fillitin(sitepoints,sitename,Dest,siteextrinfo,sitepage){
    moveover(sitepoints);
    document.SeekLoadLink.sitepoints.value=sitepoints;
    document.SeekLoadLink.sitename.value=sitename;
    document.SeekLoadLink.Dest.value=Dest;
    document.SeekLoadLink.siteextrinfo.value=siteextrinfo;
    document.SeekLoadLink.sitepage.value=sitepage;
    window.setTimeout("prepare()",3500);
}
</script>

<form method="Post" action="" name="SeekLoadLink">


<div id="LinksLayer1">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="TDLinks"><tr><td valign="top" align="center">
Blablabla Head Text

<table width="100%" border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td width="33%" valign="top"><b>**,A,B,C,D,E,F,G</b></td>
    <td width="33%" valign="top"><b>H,I,J,K,L,M,N,O</b></td>
    <td width="33%" valign="top"><b>P,Q,R,S,T,U,V,W,X,X,Y,Z</b></td>
  </tr>
  <tr>
    <td width="33%" valign="top" class="TDOnLinks"><!-- A,B,C,D,E,F,G -->
Blablabla **,A,B,C,D,E,F,G
    </td><td width="33%" valign="top" class="TDOnLinks"><!-- H,I,J,K,L,M,N,O -->
Blablabla H,I,J,K,L,M,N,O
    </td><td width="33%" valign="top" class="TDOnLinks"><!-- P,Q,R,S,T,U,V,W,X,X,Y,Z -->
Blablabla LINK  <a href="https://www.youtube.com" target="_blank" onmouseover="this.style.backgroundColor='#FFFF00'; javascript: fillitin('6 &#8722; points','YouTube.com','https://www.youtube.com','Pros & Cons: \n + Has most videos on the net \n &#8722; Little money after 1000 visits \n &#8722; Has too many bad rules.','Gives you very little money for sharing your videos. \nSince January 2018, it only gives money if you have over 1000 visitors per 30 days. \nThey also sometime block and delete videos based on fake copyright claims if you have something society contradicting on the video. Censorship is common.');" onmouseout="this.style.backgroundColor='';"><img src="../../Menu_js/imgmini/Link_Icon2.gif" width="16" height="16" border="0"> YouTube.com</a><br>

   </td>
  </tr>
</table>

</td></tr></table>
</div>

<div class="DivLinkInfo2">
<table height="100%" width="99%" border="0" cellspacing="0" cellpadding="0" class="TEXTLinksMasage" style="direction: ltr;"><tr><td align="left" valign="top" colspan="2">
<nobr><input type="text" name="sitepoints" size="10" class="TEXTLinkPonits" maxlength="255" text value="Ranking" contenteditable="false"><input type="text" name="sitename" size="30" class="TEXTLinkName" maxlength="255" text value="Name" contenteditable="false">URL:<input type="text" name="Dest" class="TEXTLinkPage" size="49" maxlength="255" value="Address" contenteditable="false"></nobr>
</td></tr><tr><td align="left" valign="top" width="1px">
<Textarea class="TEXTLinkExtraInfo" name="siteextrinfo" cols="28" rows="4" contenteditable="false">

Extra
Inforomation and Pros / Cons
</Textarea>
</td><td align="right" valign="top">
<Textarea class="TEXTLinkInfo" name="sitepage" cols="87" rows="4" contenteditable="false">

Page Resume, Information and Comments...
</Textarea>
</td></tr></table></td></tr></table>
</div>

</form>

NOTE: I need no font codes for the text in the box, as the box uses the font body CSS already working well. The box only has CSS for background and nothing else. Not even size as the size is regulated by other CSS codes that work. I only need to effect the background in the box, nothing else.

I tried this:

div.TDLinks:after
        { background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image:url('../Pictures/2/P_13.jpg'); opacity : 0.5; position: absolute; z-index: -1; }

and

.TDLinks:after
        { background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image:url('../Pictures/2/P_13.jpg'); opacity : 0.5; position: absolute; z-index: -1; }

But it did not work, what did I do wrong? Could my JavaScript be blocking it?

NOTE: I know there are others with similar questions and answers, but it is only similar and not the same question, because nobody has asked of having only one box for this solution with picture background, all the other solutions can be solved by having two div boxes, but I need it all with one div box without effecting the text in that box or they ask of color background and that is a totally different thing.

NOTE: This is not a repeat question of this "Set opacity of background image without affecting child elements" because that asks of transparent background color, I ask of transparent background PICTURE or IMAGE. Look at the question and its codes plz..

This question does not repeat this one:

Set opacity of background image without affecting child elements

Answer 1

Yes, you can use a pseudo element:

div.bg {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  text-transform:uppercase;
}

div.bg:after {
  content: "";
  background: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

<div class="bg">text here</div>