在小于其包含元素的居中图像上叠加文本 [英] Overlay Text on a Centered Image Which Is Smaller Than Its Containing Element

查看：34
本文介绍了在小于其包含元素的居中图像上叠加文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下情况:

  1. 宽度小于页面宽度的图像.
  2. 图像需要在其父 div(更宽)内居中.
  3. 叠加文本应显示在图像的一个角上.
  4. 图像无法拉伸.图片将以其原始尺寸显示.
  5. 不能在 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>

I have the following case:

  1. Image which its width is less than the page width.
  2. Image needs to be centered within its parent div (Which is wider).
  3. Overlay text should be displayed on the image on one of its corners.
  4. Image can not be stretched. Image will appear in its native size.
  5. The image size can not be set in CSS as this template will be used for many images in different size.

So the code I came up with is given in https://jsfiddle.net/RoyiA/gdezys7j Or (Must be viewed in Full Screen so the image will be centered):

@font-face {font-family: "MammaGamma";
src: url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.eot");
src: url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.eot?#iefix") format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.woff2") format("woff2"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.woff") format("woff"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.ttf") format("truetype"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.svg#MammaGamma") format("svg");
}

.image-container {
  	position: relative;
  	font-family: Arial;
}

.image-center{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}

.image-text-block {
  	position: absolute;
display: block;
  	top: 100px;
  	left: 10px;
  	background-color: rgba(100, 100, 100, 0.5);
  	color: white;
  	padding-left: 10px;
  	padding-right: 10px;
}

<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="image-container">
	<img class="image-center" src="https://i.imgur.com/0s8kLb7.png" alt="Nature">
  	<div class="image-text-block">
    	<h3>Created with <span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>
    	<p>Image: <a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a> by Mireille Lannoo</p>
  	</div>
</div>

The problem I'm having is that the text div is relative to the position of its parent div while the image is centered. How can address that?

解决方案

I would suggest wrapping the image-container block inside another div which purpose is to center it. That way the image-container block has the width of the image and your absolute positioning of the caption box should work as intended.

.image-container {
  position: relative;
  font-family: Arial;
}

.image-center {
  display: flex;
  justify-content: center;
}

.image-center img {
  display: block;
}

.image-text-block {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  background-color: rgba(100, 100, 100, .5);
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="image-center">
  <div class="image-container">
    <img src="https://i.imgur.com/0s8kLb7.png" alt="Nature">
    <div class="image-text-block">
      <h3>Created with <span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>
      <p>Image: <a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a> by Mireille Lannoo</p>
    </div>
  </div>
</div>

这篇关于在小于其包含元素的居中图像上叠加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆