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

你应该有spacer btw的透明背景：

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

Answer 3

让它们看不见：

.spacer {
    opacity: 0;
}

Answer 4

你也可以写＆＃39;透明＆＃39;像这样：

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

为什么我在html文本后得到黑色的间隔符？

4 个答案: