如何将半透明的“图片/图像”设置为黑白，而不影响子元素和背景颜色？ [复制]

Posted 2023-03-06

【中文标题】如何将半透明的“图片/图像”设置为黑白，而不影响子元素和背景颜色？ [复制]

【英文标题】：How to set a semi transparent "picture/image" into black and white, without affecting child elements and background color? [duplicate]

【发布时间】：2018-07-01 13:56:27

【问题描述】：

我知道有人说你应该像这样使用背景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  border="0" cellspacing="0" cellpadding="0" class="TDLinks"><tr><td valign="top" align="center">
Blablabla Head Text

<table  border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td  valign="top"><b>**,A,B,C,D,E,F,G</b></td>
    <td  valign="top"><b>H,I,J,K,L,M,N,O</b></td>
    <td  valign="top"><b>P,Q,R,S,T,U,V,W,X,X,Y,Z</b></td>
  </tr>
  <tr>
    <td  valign="top" class="TDOnLinks"><!-- A,B,C,D,E,F,G -->
Blablabla **,A,B,C,D,E,F,G
    </td><td  valign="top" class="TDOnLinks"><!-- H,I,J,K,L,M,N,O -->
Blablabla H,I,J,K,L,M,N,O
    </td><td  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"   border="0"> YouTube.com</a><br>

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

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

<div class="DivLinkInfo2">
<table   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" >
<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 框来解决所有问题，而不影响该框中的文本，或者他们要求颜色背景，这是完全不同的事情。

注意： 这不是“在不影响子元素的情况下设置背景图像的不透明度”的重复问题，因为它要求透明背景颜色，我要求透明背景图片或图像。看看问题和它的代码plz..

这个问题不再重复这个：

Set opacity of background image without affecting child elements

【问题讨论】：

***.com/questions/44438868/…

您需要提供与此 CSS 配套的 html，以便任何人帮助您。请参阅minimal reproducible example 了解更多信息。

【参考方案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/***/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>

【讨论】：

我试过这样div.TDLinks:after background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image:url('../Pictures/2/P_13.jpg'); opacity : 0.5; ，但没用

我的 sn-p 中有一个 z-index，再试一次，如果您仍然需要帮助，请发布您的代码。 jsfiddle.net

你的 div 必须有 position:relative 并且伪元素必须有 position: absolute 正如你在我的 sn-p 中看到的那样。

我总是摆弄我得到的代码。等等，让我用我没有放的 z-index 进行测试。

Testdiv.TDLinks width: 200px; height: 200px; display: block; position: relative; text-align:center; font-size:20px; font-weight:bold; text-transform:uppercase; div.TDLinks:after content: ""; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image:url('../Pictures/2/P_13.jpg'); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1;