为什么在html中的文本后出现黑色的空格？

Question

因此，我遵循了本教程： https : //css-tricks.com/text-blocks-over-image/用于在图像上插入文本。 代码如下所示：

 .image{ position: relative; } h2{ position:absolute; top: 200px; left: 200px; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; } h2 span.spacer { padding:0 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $(function() { $("h2") .wrapInner("<span>") $("h2 br") .before("<span class='spacer'>") .after("<span class='spacer'>"); }); }); </script> <div class = "image" id = "news"> <h2>A Movie in the Park:<br />Kung Fu Panda</h2> </div> 

但是，当我运行代码时，由于增加了间距，因此在第一行的末尾和第二行的末尾有这些黑色的东西。 我认为这是因为两次填充。

网站上的教程中没有这些内容。 为什么有这些？如何删除它们？

谢谢

Answer 1

将以下内容添加到您的CSS中：

h2 span.spacer {
    padding: 0 5px;
    background-color: rgba(0,0,0,0);
}

好像您的背景颜色重叠了。

Answer 2

您应该对间隔符btw具有透明的背景：

h2 span.spacer {
   padding:0 5px;
   background: transparent;
}

Answer 3

只是使它们不可见：

.spacer {
    opacity: 0;
}

Answer 4

您也可以这样写“透明”：

h2 span.spacer {
    padding: 0 5px;
    background: transparent;
}