图片上的文字-响应式 [英] Text over image - responsive
本文介绍了图片上的文字-响应式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的第一个问题...我必须做这样的事情:
this is my first question soo... i have to do someting like this:
但是我搜索了很多内容,对我没有任何帮助,我的html和CSS中都有类似的内容
but i search a lot and nothing work for me, i had something like this in my html and css
.thumbnail {
position: relative;
margin-bottom: 0;
border: 0;
border-color: transparent;
}
.caption {
position: absolute;
top: 40%;
left: 0;
width: 100%;
}
<div id="box-search">
<div class="thumbnail text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto@windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>
有效,但是当我使用Chrome的响应模式时,文字会离开图像
that work, but when i use the responsive mode from chrome, the text leave the image
(对不起,我的英语,我会说西班牙语)
(sorry for my english, i speak spanish)
推荐答案
img {
display: block;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
text-align: center;
color: white;
font-weight: bold;
}
<div id="box-search">
<div class="thumbnail">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto@windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>
这篇关于图片上的文字-响应式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文