Question

查找将文本覆盖到图像的一半。实现此目标的最佳做法？

Answer 1

有很多方法可以做到这一点！

如果它是固定的（无响应）文档，并且图像是固定的背景，则可以在主要元素中使用它：

.container{
   padding-right: 50%;
}

然后将50％的值调整为100px或所需的驱动器

如何将元素划分为2个div（在main内部），并在所有父级中使用CSS的“ Flex”属性。

如果有两个不同的元素，则可以使用“ shape-outside”，并且您希望其中一个的文本围绕另一个。

但是，如果您提供正在使用的代码，我可以为您提供更多帮助！

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

Answer 3

您可以使用

将图像绝对放置在左侧的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>

最好在文本中间放置文本

3 个答案: