在图像上覆盖文本HTML

我有一张图像，我想在其上覆盖一些白色文本。我试图通过缩略图角落的视频分享网站来实现YouTube等视频分享网站。我如何使用CSS/HTML做到这一点？在图像上覆盖文本HTML

这样的：

2017-05-31 Seth Painter

你能分享一些代码？ – Gerard

你可以在div中绑定你的图像，并应用相对于此的位置，然后添加文本并将绝对位置应用于此。调整位置并享受 –

试试这个：

.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="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg"> 
 
    <h3>Cute Animal</h3> 
 
</div>

来源

2017-05-31 04:22:08 Ehsan

您可以使用CSS它。

有做〜

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

所以这一个设置元素绝对位置的两种方式，然后你可以指定像素的位置，但它将使一些东西，不能改变它是对其他元素的回应。它会让你的元素像Paint中的一个矩形，你可以在任何地方随意移动。

第二个是由我推荐〜

这一个是做的一个肮脏的方式，但它是非常有用的。你可以用这个向上拉东西。如果您的文字位于文字的旁边，则可以将保留余量设置为相同。这取决于你想使用哪种方法以及你想指定多少像素。

在你的情况，我可以给数学表达式这样做的〜

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

享受：d

来源

2017-05-31 04:19:04 KevalPithadiya

在这里你去：

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/

可以与顶级&打左设置你的愿望位置

来源

2017-05-31 04:22:58

这是很容易做到的。我相信你没有足够的CSS知识。但是我会以任何方式告诉你。

Your structure should be like below:- 

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

    Then add css for this 

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



Adjust position as needed.

来源

2017-05-31 04:25:39

.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; 
 
}

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

来源

2017-05-31 04:33:25 LKG

在图像上覆盖文本HTML

回答

相关问题