覆盖图像HTML上的文本

Question

我有一张图片，我想要覆盖一些白色文字。我试图在YouTube等视频共享网站上实现与缩略图一角的视频时长相同的功能。我怎么能用CSS / HTML做到这一点？

喜欢这个：

Answer 1

试试这个：

.container {
    width: 300px;
    position: relative;
}

.container img {
    width: 100%;
}

.container h3 {
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 2px;
}

<div class="container">
    <img src="https://i.imgur.com/0s8kLb7.png">
    <h3>Cute Animal</h3>
</div>

Answer 2

＆＃13;

＆＃13;

.main {
  width:400px;
  position:relative;
}
.picture {
  width:100%;
}
.main p {
  position:absolute;
  bottom:0px;
  right:0px;
  color:#fff;
  font-size:14px;
  background:#999;
  padding:3px;
  z-index:99;
}

＆＃13;

<div class="main">
<p>
Hello
</p>
<img class="picture" src="http://lorempixel.com/400/200/sports/" alt="">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用CSS。

有两种方法可以做到这一点〜

position: absolute;
top: 200px;
left 200px;

所以这个将元素的位置设置为绝对，然后你可以用像素指定位置，但它会使它不能改变它的位置以响应其他元素。它会使你的元素像Paint中的一个矩形，你可以在任何地方自由移动。

第二个是我推荐的〜

margin-top: -200px;

这是一种肮脏的方式，但它很有用。你可以使用它向上拉东西。如果您的文本位于文本的一侧，则可以使用margin-left。这取决于您要使用哪种方法以及要指定的像素数。

在你的情况下，我可以用数学表达式做到这一点〜

margin-top：-text_height; margin-left：video_width - text_width;

享受：D

Answer 4

你走了：

HTML：

<div class="image">
  <img src="http://lorempixel.com/400/400/sports/2" alt="" />      
  <h2><span>Some Text</span></h2></div><br/>
</div>

CSS：

.image { 
  position: relative; 
  width: 100%; /* for IE 6 */
}

h2 { 
  position: absolute; 
  top: 300px; 
  left: 0; 
  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.4);
  padding: 10px; 
}

https://jsfiddle.net/emilvr/f03m3Lks/

你可以玩top＆amp;留下来设定你想要的位置

Answer 5

这很容易做到。我相信你对CSS没有足够的了解。但无论如何我都会告诉你。

您的结构应如下所示：

    <div class="relative">
    <img src="" />
    <span class="absolute">text</span>
    </div>

然后为此

添加css

    .relative{float:left; position;relative;}
    .absolute{position:absolute; bottom:0px; right:0px;}

根据需要调整位置。