使用 CSS 将文本环绕图像并使其表现得像背景图像

Question

我正在使用 shape-outside 来给网站带来“杂志”的感觉。每个页面都有一个人的新形象，文字围绕着那个人。外面的形状完美而简单！唯一的问题是我不知道如何制作它，所以一列中的文本（左）设置高度而不是图像（右）。

举个例子：

或原始代码

HTML:

<div class="container">
  <img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna. 
  </div>
</div>
<div class="footer">

</div>

CSS:

.image {
  float: right;
  max-width: 200px;
  height: auto;
  shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);

}
.footer {
  width:100%;
  height:50px;
  border: 2px solid green
}

我得到的是这样的：

但是，我想要的是这个（看看图片是如何放在页脚后面的）：

基本上我希望它像背景图片一样工作。

我尝试了绝对位置，但它破坏了文本换行。我不认为我可以用背景图片来做到这一点。因此，到目前为止我唯一的解决方案是使用 JS 获取左侧的高度并将其应用到带有 overflow:hidden 的容器，我真的很想避免这种情况。

Answer 1

应用到容器的新 overflow:clip 将完成工作

.image {
  float: right;
  max-width: 200px;
  height: auto;
  shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}

.footer {
  width: 100%;
  height: 50px;
  border: 2px solid green
}


/* .text{ 
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
  } */

.container {
  overflow: clip;
}

<div class="container">
  <img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
    quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
  </div>
</div>
<div class="footer">

</div>

为了获得更好的支持，您可以改用 clip-path：

.image {
  float: right;
  max-width: 200px;
  height: auto;
  shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}

.footer {
  width: 100%;
  height: 50px;
  border: 2px solid green
}


.container {
  clip-path: inset(0);
}

<div class="container">
  <img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
    quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
  </div>
</div>
<div class="footer">

</div>

使用 CSS 将文本环绕图像并使其表现得像背景图像

Using CSS to wrap text around image and have it behave like a background image

html

javascript

css

shape-outside