css使字浮在图片上

CSS是用来控制网页样式的语言，它能够让我们制作出各种各样的效果，其中包括文字浮在图片上。下面我们就来看看如何使用CSS实现该效果。

/* 定义图片样式 */img {
      display: block;
      margin: auto;
      width: 50%;
}
/* 定义文字样式 */.text-on-img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 2em;
}
     

上述代码中，我们首先定义了图片的样式，设置了它为块级元素，使得它自动换行；然后使用margin:auto让它居中显示。接着，我们定义了文字的样式，其中position:absolute设置了文字的定位方式为绝对定位，top、left、transform属性用来居中显示文字，color属性用来设置文字颜色，font-size属性用来设置字体大小。

要将文字放在图片上，我们需要给父元素添加position:relative属性，以便让文字相对于父元素进行定位。接下来，在父元素中插入文字，并添加class为text-on-img。当我们预览页面时，就可以看到文字顺利地浮在了图片上。

div style="position:relative;
    ">
      img src="image.jpg">
      p class="text-on-img">
    这是浮在图片上的文字/p>
    /div>
     

总的来说，使用CSS让文字浮在图片上并不是很难，只需要一些定位和样式设置就可以完成。希望本文对你有所帮助，祝你能够在网页设计中创造出更加独特的效果！

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