在小于其包含元素的居中图像上叠加文本 [英] Overlay Text on a Centered Image Which Is Smaller Than Its Containing Element
问题描述
我有以下情况:
- 宽度小于页面宽度的图像.
- 图像需要在其父
div
(更宽)内居中. - 叠加文本应显示在图像的一个角上.
- 图像无法拉伸.图片将以其原始尺寸显示.
- 不能在
CSS
中设置图像大小,因为此模板将用于许多不同大小的图像.
所以我想出的代码在https://jsfiddle.net/RoyiA/gdezys7j 或(必须以全屏模式查看,以便图像居中):
@font-face {font-family: "MammaGamma";src: url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.eot");src: url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.eot?#iefix") 格式("embedded-opentype"),url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.woff2") 格式("woff2"),url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.woff") 格式("woff"),url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.ttf") 格式("truetype"),url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.svg#MammaGamma") 格式("svg");}.图像容器{位置:相对;字体系列:Arial;}.图像中心{位置:相对;显示:块;左边距:自动;右边距:自动;}.image-text-block {位置:绝对;显示:块;顶部:100px;左:10px;背景颜色:rgba(100, 100, 100, 0.5);白颜色;padding-left: 10px;padding-right: 10px;}
<h2>图片文本块</h2><p>如何在图像上放置文本块:</p><div class="image-container"><img class="image-center" src="https://i.imgur.com/0s8kLb7.png" alt="自然"><div class="image-text-block"><h3>使用<span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>创建<p>图片:<a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a>作者:Mireille Lannoo</p>
我遇到的问题是文本 div
在图像居中时相对于其父 div
的位置.如何解决这个问题?
我建议将图像容器块包装在另一个 div 中,目的是使其居中.这样,图像容器块具有图像的宽度,并且您对标题框的绝对定位应按预期工作.
.image-container {位置:相对;字体系列:Arial;}.图像中心{显示:弹性;对齐内容:居中;}.image-center img {显示:块;}.image-text-block {位置:绝对;显示:块;顶部:10px;左:10px;背景颜色:rgba(100, 100, 100, .5);白颜色;padding-left: 10px;padding-right: 10px;}
<h2>图片文本块</h2><p>如何在图像上放置文本块:</p><div class="image-center"><div class="image-container"><img src="https://i.imgur.com/0s8kLb7.png" alt="自然"><div class="image-text-block"><h3>使用<span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>创建<p>图片:<a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a>作者:Mireille Lannoo</p>