在图像上覆盖文本HTML
答
试试这个:
.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>
答
您可以使用CSS它。
有做〜
position: absolute;
top: 200px;
left 200px;
所以这一个设置元素绝对位置的两种方式,然后你可以指定像素的位置,但它将使一些东西,不能改变它是对其他元素的回应。它会让你的元素像Paint中的一个矩形,你可以在任何地方随意移动。
第二个是由我推荐〜
这一个是做的一个肮脏的方式,但它是非常有用的。你可以用这个向上拉东西。如果您的文字位于文字的旁边,则可以将保留余量设置为相同。这取决于你想使用哪种方法以及你想指定多少像素。
在你的情况,我可以给数学表达式这样做的〜
的margin-top:-text_height; margin-left:video_width - text_width;
享受:d
答
在这里你去:
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/
可以与*&打左设置你的愿望位置
答
这是很容易做到的。我相信你没有足够的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.
答
.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>
你能分享一些代码? – Gerard
你可以在div中绑定你的图像,并应用相对于此的位置,然后添加文本并将绝对位置应用于此。调整位置并享受 –