Question

我想在视频的右下角制作带有持续时间的缩略图，但是我不知道如何正确移动插卡（Bootstrap4）中的跨度对象。当我尝试将边缘向左移超过50％时，span对象崩溃：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style>
  	.duration {
		background-color: black;
		color: white;
		padding-left: 4px;
		padding-right: 4px;
		opacity: 0.7;
		border-radius: 5px;
	}
    
    .card-img-overlay {
    	position: absolute;
    	margin-top: 75% !important;
        margin-left: 51% !important;
        margin-right: 0% !important;
    }
  </style>
</head>
<body>
 
<div class="container-fluid">
  <div class="card img-fluid mt-2" style="width:200px">
    <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <p class="card-text">Example text here</p>
    </div>
    <div class="card-img-overlay">
      <span class="duration">2:42:42</span>
    </div>
  </div>
</div>

</body>
</html>

编辑：我通过替换CSS来解决了这个问题：

.duration {
    background-color: black;
    color: white;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.7;
    border-radius: 5px;
    position: absolute;
    top:65%;
    left:68%;
}

Answer 1

您可以在card-img-overlay类中设置替代填充属性。尝试以下操作：

NavigationViewDefaultPaneBackground

希望有帮助，我的朋友。

Answer 2

或者您也可以像这样浮动它

float：right;

如何在右下角的卡片上覆盖跨度？

2 个答案: