在图像中途放置文本的最佳方法[关闭]答案

【问题标题】：Best way to lay text over an image halfway [closed]在图像中途放置文本的最佳方法[关闭]
【发布时间】：2018-11-29 01:33:17
【问题描述】：

看起来在图像中途覆盖了一个文本。实现这一目标的最佳做法？

Example Here

【问题讨论】：

标签： html css sass materialize

【解决方案1】：

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

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

这是一个有效的 sn-p：

.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>

【讨论】：

【解决方案2】：

像这样创建一个类并在其中插入图片链接：
在你的图片之后创建一个类：
插入 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>

【讨论】：