css例子图上添字

最近在学习 CSS，今天看了一篇很有趣的文章，是关于在 CSS 例子图上添字的。在一副图片中，我们可以使用 CSS 添加自己的文字，这样可以更清晰地说明我们的设计意图。

下面就是这个例子图：

      .box {
          width: 200px;
          height: 200px;
          background: #eee;
          border-radius: 50%;
          position: relative;
    }
     .box:before {
          content: "";
          width: 100px;
          height: 100px;
          background: #fff;
          border-radius: 50%;
          position: absolute;
          top: 50px;
          left: 50px;
    }
  

这是一个简单的 CSS 代码块，描述了一个圆形盒子和一个白色圆形在盒子内部。我们可以使用以下方式在图片上添加自己的文字：

      .box {
          width: 200px;
          height: 200px;
          background: #eee;
          border-radius: 50%;
          position: relative;
    }
    /* 添加文字样式 */    .example-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 24px;
          font-weight: bold;
          color: #333;
          text-align: center;
          text-shadow: 1px 1px #fff;
    }
     .box:before {
          content: "";
          width: 100px;
          height: 100px;
          background: #fff;
          border-radius: 50%;
          position: absolute;
          top: 50px;
          left: 50px;
    }
  

现在，我们在 CSS 代码块中添加了一个叫做 .example-text 的 class，这样我们就可以在图片上添加一些文字了。在这个例子中，我添加了一个文字 “Hello, World!”

这是修改后的代码：

      .box {
          width: 200px;
          height: 200px;
          background: #eee;
          border-radius: 50%;
          position: relative;
    }
    /* 添加文字样式 */    .example-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 24px;
          font-weight: bold;
          color: #333;
          text-align: center;
          text-shadow: 1px 1px #fff;
    }
     .box:before {
          content: "";
          width: 100px;
          height: 100px;
          background: #fff;
          border-radius: 50%;
          position: absolute;
          top: 50px;
          left: 50px;
    }
      

在 .box 中，我们添加了一个新的 class – .example-text。这个 class 中有一些属性，比如 position: absolute，color: #333 等等，这些属性控制了文字的位置、大小、颜色和阴影，使得文字更加美观。

在这篇文章中，我们学习了如何使用 CSS 在一个例子图中添加文字。这不仅仅可以用于表示设计意图，也可以用于制作一些比较独特的效果。在学习 CSS 的过程中，这些小技巧都可以帮助我们更好地掌握 CSS。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！