Question

我尝试在wordpress博客上制作一个图片信息框。我希望信息框显示有点透明。我没有问题。但是当我这样做时，文字变得透明。

我在文章中使用了这段代码。

<div class="resimKapsayici">
<img src="http://www.domascal.com/wp-content/uploads/2018/03/valentina-tereskova-domascal.pg" width="728" height="728" />

<p class="resimaltbg" style="color: #fff;">
<b>Dr Valentina Tereshkova, the first woman in space, realised she did not have her toothbrush upon reaching orbit. &nbsp;&nbsp;</b></p>


</div>
<style>
.resimKapsayici {position:relative}
.gercekyazi {position:absolute;left:0px;top:412px;}
.resimaltbg {

    margin: 90px;
  margin-top:-64px;
  background-color: #4286f4;
  border: 0px solid black;
  opacity: 0.8;
  filter: alpha(opacity=80);}




.resimaltbg p{
opacity:1;
}

</style>

我现在直到尝试了什么？

<p class="resimaltbg" style="color: #fff;" "opacity: 1;>
<b>Dr Valentina Tereshkova, the first woman in space, realised she did not have her toothbrush upon reaching orbit. &nbsp;&nbsp;</b></p>

但它没有用。我不想透明文字。我怎么能这样做？

Answer 1

你可以让背景具有不透明度，而不是整个元素：

将颜色变为RGB（＃4286f4 = rgb（66,134,244）），然后使用background-color: rgba(66, 134, 244, a);，其中a是0到1之间的数字（不透明度）

Answer 2

您需要将以下内容添加到.resimaltbg类：

rgba(66,134,244,0.8);

然后删除不透明度和过滤器属性。

这仅在背景上设置Alpha透明度，并且不会影响其中的内容。当您尝试使用不透明度时，它将始终影响元素的所有内容。

PS你的内联样式属性：

<p class="resimaltbg" style="color: #fff;" "opacity: 1;>

带引号的语法错误。它应该是：

<p class="resimaltbg" style="color: #fff; opacity: 1;">

Answer 3

对于课程resimaltbg，请添加background-color: rgba(66, 134, 244, 0.8)和color:#fff

CSS不透明度框不能完全显示文本

3 个答案: