图片字幕问题

Question

＆＃13;

＆＃13;

import datetime

mapper = lambda x: x.strftime("%Y-%m-%d") if isinstance(x, datetime.datetime) else x
df.columns = df.columns.map(mapper)

＆＃13;

h2 span.spacer {
   padding:0 5px;
}
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 { 
   position: absolute; 
   top: 50px; 
   left: 0; 
}

＆＃13;

＆＃13;

＆＃13;

素不相识！

所以我开发了一种时髦的图像字幕方式，如下面的代码所示。但是，如您所见，第一行末尾有黑色块，第二行末尾有较暗颜色，包括两行之间的空格。

有什么方法可以解决这个问题吗？

感谢。

＆＃13;

＆＃13;

<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

＆＃13;

h2 span.spacer {
   padding:0 5px;
}
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 { 
   position: absolute; 
   top: 50px; 
   left: 0; 
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

喜欢这个吗？

＆＃13;

＆＃13;

h2 span.spacer {
   padding:0 5px;
}
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; 
   display: inline-block;
}
h2 { 
   position: absolute; 
   top: 50px; 
   left: 0; 
}

＆＃13;

<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新：删除两个跨度之间的行

这个吧？不确定发生了什么，当我发布时，它只显示纯HTML：/希望你能正确看到它。

＆＃13;

＆＃13;

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: 9px 10px;
}
h2 { 
   position: absolute; 
   top: 50px; 
   left: 0; 
}

＆＃13;

<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>

＆＃13;

＆＃13;

＆＃13;

结果： 希望它有所帮助！

Answer 3

试试这个

h2 span.spacer {
   
}
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 { 
   position: absolute; 
   top: 80px; 
   left: 0; 
}

<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>