将文本中途放置在图像上的最佳方法

Question

正在寻找在图像上叠加文本的一半。实现此目标的最佳做法？

Example Here

Answer 1

像这样创建一个 class 并将您的图像 link 插入其中：
在您的图像后创建 class：
插入css

.imageContainer {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="imageContainer">
  <img src="myImage.jpg" alt="myImage" style="width:100%;">
  <div class="bottom-left">This text is in the bottom left</div>
  <div class="top-left">This text is in the top left.</div>
  <div class="top-right">This text is in the top right.</div>
  <div class="bottom-right">This text is in the bottom right.</div>
  <div class="centered">This text is centered.</div>
</div>

Answer 2

您可以将图像绝对放置在左侧 60% 的位置，将文本放置在左侧 0% 到 80% 的位置 （例如） ：

.image{
  position:absolute;
  left:60%;
  ...
}
.text{
  width:80%;
  ...
}

这是一个工作片段：

.container{
  position:relative;
  width:100%;
  height:200px;
}

.image{
  position:absolute;
  top:0;
  left:60%;
  width:40%;
  height:100%;  
}

.text{
  width:80%;
  position:absolute;
  top:0;
  left:0;
}

<div class="container">
  <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">  
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
  </div>
</div>

将文本中途放置在图像上的最佳方法

Best way to lay text over an image halfway

html

css

sass

materialize