Html 如何设置半透明；图片/图像“；变成黑白，不影响子元素和背景色？
我知道有人说你应该使用背景Html 如何设置半透明；图片/图像“；变成黑白，不影响子元素和背景色？,html,css,image,opacity,transparent,Html,Css,Image,Opacity,Transparent,我知道有人说你应该使用背景rgba（0,0,0,0.5）类似于此，但这仅适用于颜色，而不适用于图片，并且它也不会将图片重新制作为黑白 我要求背景图片的透明度和黑白转换，我知道我可以使用例如opacity:0.5用于图片背景，但这也会使框中的文本变得透明，并且也不会使其变为黑白 我只想背景图片的div框是半透明的，并转换成黑色和白色在同一时间，也许它是两个不同的代码为它 我知道解决方案我可以使用两个div框，一个是半透明背景，另一个是文本，这样不会影响一个框对另一个框的不透明度，但是我想知道，如果
rgba（0,0,0,0.5）类似于此，但这仅适用于颜色，而不适用于图片，并且它也不会将图片重新制作为黑白
我要求背景图片的透明度和黑白转换，我知道我可以使用例如opacity:0.5
用于图片背景，但这也会使框中的文本变得透明，并且也不会使其变为黑白
我只想背景图片的div框是半透明的，并转换成黑色和白色在同一时间，也许它是两个不同的代码为它
我知道解决方案我可以使用两个div框，一个是半透明背景，另一个是文本，这样不会影响一个框对另一个框的不透明度，但是我想知道，如果在背景图像上使用半透明度加颜色或不透明度，是否有一种解决方案可以只对背景和文本使用一个div框而不影响文本。
例如，如果有类似的情况：
background-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'); }
<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 − points','YouTube.com','https://www.youtube.com','Pros & Cons: \n + Has most videos on the net \n − Little money after 1000 visits \n − 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>
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; }
当#LinksLayer1
是一个包含.t链接
表格和字体的框（外框）时，它的效果很好，那么.TDLinks
表格就是背景但正如您和我所了解的，它不会提供透明的背景。
简化了我的HTML和JavaScript代码：
#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'); }
<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 − points','YouTube.com','https://www.youtube.com','Pros & Cons: \n + Has most videos on the net \n − Little money after 1000 visits \n − 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>
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; }
及
但它不起作用，我做错了什么？我的JavaScript会阻止它吗
注意：我知道还有其他类似的问题和答案，但这只是类似的问题，而不是相同的问题，因为没有人要求这个带有图片背景的解决方案只有一个框，所有其他解决方案都可以通过两个div框来解决，但是我需要一个div框，而不影响框中的文本，或者他们要求颜色背景，这是完全不同的事情
注意：
这不是“在不影响子元素的情况下设置背景图像的不透明度”的重复问题，因为这要求透明背景颜色，我要求透明背景图片或图像。请看问题及其代码。
这个问题不会重复这个问题：
是的，您可以使用伪元素：
div.bg{
宽度：200px；
高度：200px；
显示：块；
位置：相对位置；
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
文本转换：大写；
}
分区背景：之后{
内容：“；
背景：url（'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a');
不透明度：0.5；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
z指数：-1；
}
text here
我这样试过div.TDLinks:after{background repeat:repeat；background attachment:fixed；background position:center-center；background image:url（'../Pictures/2/P_13.jpg'）；不透明性：0.5；}
但它不起作用我的代码片段中有一个z索引，请再试一次，如果您仍然需要帮助，请发布您的代码。您的div必须有position:relative，伪元素必须有position:absolute，正如您在我的代码片段中看到的那样。请稍候，让我使用我没有放置的z索引原因进行测试。测试div.TDLinks{width:200px；height:200px；display:block；位置：relative；文本对齐：居中；字体大小：20px；字体大小：粗体；文本转换：大写；}div.TDLinks:after{content:“；背景重复：重复；背景附件：固定；背景位置：中心；背景图像：url（'../Pictures/2/P_13.jpg'）；不透明度：0.5；顶部：0；左侧：0；底部：0；右侧：0；位置：绝对；z索引：-1；}
您需要提供此CSS附带的HTML，以便任何人都能帮助您。有关更多信息，请参阅。