[分享]css中字体怎么绕过图片

在网站设计中，有时候我们需要在文本中插入图片。然而，有些情况下，图片会挡住我们想要显示的文本。这时，我们就需要通过 CSS 中的字体绕过图片。下面我们来看看如何实现。img { float: left...

在网站设计中，有时候我们需要在文本中插入图片。然而，有些情况下，图片会挡住我们想要显示的文本。这时，我们就需要通过 CSS 中的字体绕过图片。下面我们来看看如何实现。

img {
  float: left;
  margin-right: 10px;
}

p {
  text-indent: -10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1em;
  font-size: 1.2em;
  text-decoration: underline;
  color: #007799;
} 

首先，我们通过设置 float 属性来使图片向左浮动，并设置右侧的 margin 为 10px 以免和文本紧贴在一起。

接着，我们使用 text-indent 属性将该段落首行缩进 10px ，这样可以让文本顶到图片的左侧。注意，缩进距离应该与图片的 margin-right 属性相等，确保文本和图片之间间距一致。

最后，我们使用 display: inline-block 和 vertical-align: middle 属性让文字垂直居中。同时，我们设置 line-height 和 font-size 属性来调整文本的行距和字体大小，以使其更加美观。此外，我们还可以添加一些文本装饰效果，比如下划线和颜色。

通过这些 CSS 属性的设置，我们就可以很轻松地实现字体绕过图片的效果了。希望这篇文章对大家有所帮助。