图片与文字完美融合：CSS技巧解锁图文排版新境界

一、背景图片与文字的结合

1.1 使用background-image属性

.card {
  background-image: url('path/to/image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

1.2 通过::before和::after伪元素

.content {
  position: relative;
  padding: 20px;
}

.content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('path/to/image.jpg');
  background-size: cover;
  z-index: -1;
}

二、文字环绕图片

2.1 使用float属性

.image-container {
  float: left;
  width: 50%;
}

.text-container {
  overflow: hidden;
  clear: both;
}

2.2 使用Flexbox

.container {
  display: flex;
}

.image {
  flex: 0 0 50%;
}

.text {
  flex: 1;
}

三、响应式图文排版

3.1 媒体查询

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

3.2 使用CSS Grid

CSS Grid布局提供了更强大的响应式设计能力，可以轻松应对不同屏幕尺寸的布局需求。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

四、总结