Question

我知道有人说你应该使用这样的背景rgba(0, 0, 0, 0.5);，但那只是用于颜色，而不是图片。

我要求背景图片透明度，我知道我可以使用例如opacity: 0.5;作为图片背景，但这也使得包含框的文本也是透明的。

我只希望div框的背景图片是半透明的，而不是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>

如何在不影响框中文本的情况下获得半透明图片背景？

1 个答案: