如何在不影响子元素和背景颜色的情况下将半透明"picture/image"设置为黑白？

Question

我知道有人说你应该使用这样的背景rgba(0, 0, 0, 0.5);，但这仅适用于彩色，不适用于图片，也不会将图片重新制作成黑白。

我要求背景图片透明度和黑白转换，我知道我可以例如使用opacity: 0.5;作为图片背景，但这也使框中的文本也透明，也不会使其黑白。

我只希望div框的背景图片是半透明的，同时转换为黑白，也许是两个不同的代码。

我知道我可以在彼此内部使用 2 个div 框的解决方案，其中一个具有半透明背景，另一个具有文本，不会影响一个框对另一个框的不透明度，但我想知道是否有解决方案只使用一个div 框同时用于背景和文本，而不会在背景图像上使用半透明加颜色或不透明度时影响文本。

例如，如果有类似于以下内容：

background-opacity: 0.5;

或

background-image-opacity: 0.5;

虽然我知道CSS中不存在，所以请问一些解决方案？

更新：我的CSS现在使用：

#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'); }

效果很好，#LinksLayer1是一个包含.TDOnLinks表格和字体的框(外框)，然后.TDLinks表带有背景。但正如你所理解的，我知道，它并没有给出透明的背景。

简化了我的 HTML 和 JavaScript 代码：

<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>

注意：我不需要框中文本的字体代码，因为该框使用的字体正文CSS已经运行良好。该框只有用于背景的 CSS，没有其他内容。甚至没有大小，因为大小由其他有效的 CSS 代码控制。我只需要影响框中的背景，没有别的。

我试过这个：

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; }

和

.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; }

但是没有用，我做错了什么？我的 JavaScript 会阻止它吗？

注意：我知道还有其他类似的问题和答案，但它只是相似而不是同一个问题，因为没有人要求这个带有图片背景的解决方案只有一个盒子，所有其他解决方案都可以通过有两个div 框来解决，但我需要一个div 框，而不会影响该框中的文本，或者他们要求颜色背景，这是一个完全不同的东西。

注意： 这不是这个">在不影响子元素的情况下设置背景图像的不透明度"的重复问题，因为这要求透明背景颜色，我要求透明背景图片或图像。请看一下问题及其代码..

这个问题不再重复：

设置背景图像的不透明度，而不影响子元素

Answer 1

是的，您可以使用伪元素：

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>