CSS教程：优雅地在文本下方添加装饰性图形-html教程-PHP中文网

CSS教程：优雅地在文本下方添加装饰性图形

DDD

发布： 2025-11-14 11:35:37

原创

972人浏览过

css教程：优雅地在文本下方添加装饰性图形

本教程将指导您如何使用CSS在文本下方精确放置装饰性图形，无论是通过图片还是纯CSS生成。我们将详细讲解position: relative与position: absolute的组合应用，以及如何利用CSS伪元素创建并定位装饰性形状，从而优化页面性能。同时，文章还将提供文本排版和结构优化的建议。

在网页设计中，为了提升视觉效果和内容层次感，我们经常需要在文本内容周围或下方添加装饰性元素。本文将深入探讨如何使用CSS实现这一目标，特别是将一个装饰性图形（如圆形、椭圆形）精确地放置在文本内容的底部或背景。我们将介绍两种主要方法：利用现有图片进行定位，以及通过CSS伪元素直接生成图形。

核心概念：CSS定位基础

要实现精确的元素定位，CSS的position属性是关键。其中，position: relative和position: absolute的组合应用尤为重要：

position: relative: 当应用于一个父元素时，它会使该元素成为其内部position: absolute子元素的定位上下文。这意味着，子元素将相对于这个父元素进行定位，而不是整个文档流或视口。同时，relative定位的元素仍然保留其在正常文档流中的空间。
position: absolute: 当应用于一个子元素时，它会使该元素脱离正常文档流，并相对于其最近的已定位（relative, absolute, fixed, 或 sticky）祖先元素进行定位。如果没有已定位的祖先元素，它将相对于初始包含块（通常是<html>元素）进行定位。通过设置top, right, bottom, left属性，可以精确控制其位置。

方法一：使用现有图片进行定位

当您的装饰性元素是一个图片文件（例如PNG或SVG）时，可以使用position: absolute将其定位在文本下方。

立即学习“前端免费学习笔记（深入）”；

HTML 结构示例：

假设我们有一个包含标题和段落的容器，并希望将一个装饰性图片放在其下方。

<div class="event-main-container">
  <div class="firstContent">
    <img src="IMG ASSETS/Ellipse 6.png" class="decorative-ellipse">
    <h3>Events</h3>
    <p>
      If we're gonna walk though the woods, we need a little path. We'll paint
      one happy little tree right here. There's not a thing in the world wrong
      with washing your brush. Don't fiddle with it all day.
    </p>
  </div>
</div>

登录后复制

CSS 定位图片：

为了让图片相对于.firstContent进行定位，我们需要将.firstContent设置为position: relative，然后将图片设置为position: absolute。z-index属性用于控制元素的堆叠顺序，z-index: -1将图片置于文本下方。

.firstContent {
  width: fit-content; /* 根据内容调整宽度 */
  margin-left: 100px; /* 示例边距 */
  position: relative; /* 建立定位上下文 */
  /* 其他样式 */
}

.decorative-ellipse {
  position: absolute; /* 脱离文档流，相对于.firstContent定位 */
  top: -20px; /* 向上偏移 */
  left: -20px; /* 向左偏移 */
  z-index: -1; /* 将图片置于文本下方 */
  width: 160px; /* 示例宽度 */
  height: 150px; /* 示例高度 */
}

h3 {
  text-align: center;
  color: #45597e;
}

登录后复制

通过调整top和left（或bottom和right）的值，您可以精确控制装饰性图片相对于父容器的位置。

方法二：利用CSS伪元素创建并定位图形 (推荐)

对于简单的几何图形，如圆形、椭圆形或矩形，使用CSS伪元素（::before或::after）直接生成和定位是一种更高效、更灵活的方法。这种方法减少了HTTP请求，并且图形的样式更容易通过CSS进行调整。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

HTML 结构示例：

在这种方法中，我们不需要在HTML中直接放置<img>标签，而是让CSS来“绘制”装饰元素。

<div class="firstContent">
  <h3>Events</h3>
  <p>
    If we're gonna walk though the woods, we need a little path. We'll paint
    one happy little tree right here. There's not a thing in the world wrong
    with washing your brush. Don't fiddle with it all day.
  </p>
</div>

登录后复制

CSS 创建伪元素并定位：

我们将使用::before伪元素来创建并定位一个圆形背景。

body {
  background-color: #f8e68b; /* 示例背景色 */
}

.firstContent {
  width: fit-content;
  margin-left: 100px;
  position: relative; /* 建立定位上下文 */
  /* 其他样式 */
}

h3 {
  text-align: center;
  color: #45597e;
}

.firstContent::before {
  content: ""; /* 伪元素必须有content属性，即使为空 */
  background-color: #ecd03e; /* 背景颜色 */
  height: 150px; /* 高度 */
  width: 160px; /* 宽度 */
  border-radius: 50%; /* 设置为50%创建圆形或椭圆形 */

  position: absolute; /* 脱离文档流，相对于.firstContent定位 */
  top: -20px; /* 向上偏移 */
  left: -20px; /* 向左偏移 */
  z-index: -1; /* 将伪元素置于文本下方 */
}

登录后复制

在这个例子中：

content: "" 是伪元素存在的必要条件。
background-color、height、width定义了伪元素的形状和颜色。
border-radius: 50%将一个矩形变成圆形（如果width和height相等）或椭圆形（如果width和height不相等）。
position: absolute和z-index: -1的用法与方法一相同，确保其在文本下方并精确定位。

文本排版优化建议

在原始问题中，文本段落使用了<br>标签进行强制换行。虽然这可以实现特定的视觉效果，但在多数情况下，这不是最佳实践。它会降低文本的灵活性和可维护性，尤其是在响应式设计中。

推荐做法：

使用 width 或 max-width 控制段落宽度： 让浏览器根据设定的宽度自动进行换行。这使得文本在不同屏幕尺寸下能更好地适应。

.firstContent p {
  width: 300px; /* 示例：固定段落宽度 */
  /* 或者使用max-width更具弹性 */
  /* max-width: 80%; */
  line-height: 1.6; /* 增加行高，提升可读性 */
}

登录后复制

通过这种方式，您可以让文本内容更加自然地流动，并减少手动调整换行的工作量。

总结与注意事项

选择合适的方法：
- 如果装饰性元素是复杂图形或需要高分辨率的图片，使用方法一（<img>标签配合position: absolute）。
- 如果装饰性元素是简单的几何图形，如圆形、矩形、线条等，强烈推荐使用方法二（CSS伪元素）。它更轻量、性能更好，且易于维护和修改。
z-index 的重要性： 务必为装饰性元素设置z-index: -1（或任何小于文本内容的z-index值），以确保它位于文本内容的下方。
定位上下文： 始终确保父容器设置了position: relative，以便position: absolute的子元素能相对于它进行精确的定位。
响应式设计： 在实际项目中，您可能需要结合媒体查询（Media Queries）来调整装饰性元素的大小和位置，以适应不同屏幕尺寸和设备。
可访问性： 如果装饰性图片具有语义内容，请确保添加alt属性。对于纯装饰性的伪元素，无需额外考虑可访问性标签。