图片变身记：CSS巧手赋予文字新生命

一、背景知识

在开始之前，我们需要了解一些基本的背景知识。

1.1 HTML结构

首先，我们需要一个基本的HTML结构，例如：

<div class="text-image-container">
  <img src="image.jpg" alt="描述文字">
  <div class="text">这里是文字内容</div>
</div>

1.2 CSS样式

.text-image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.text-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-image-container .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  text-align: center;
}

二、实现图片与文字的结合

2.1 背景图片覆盖文字

.text-image-container {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

.text-image-container .text {
  background: rgba(0, 0, 0, 0.5); /* 半透明白色背景 */
}

2.2 文字环绕图片

<div class="text-image-container">
  <img src="image.jpg" alt="描述文字" class="float-left">
  <div class="text float-left">这里是文字内容</div>
</div>

<style>
.text-image-container {
  overflow: hidden;
}

.float-left {
  float: left;
}

.text {
  margin-left: 100px; /* 图片宽度 */
}
</style>

2.3 图片变形

.text-image-container img {
  transform: rotate(45deg);
}

三、总结