[分享]css中怎么把文字放在图片上

在素材设计中，有时候需要把文字放置于图片上，以达到视觉美感和信息传递的效果。那么，在 CSS 中怎么实现这种效果呢？接下来，我们来介绍一些方法。第一种方法是使用伪元素。将图片设置为容器的背景，并在容器...

在素材设计中，有时候需要把文字放置于图片上，以达到视觉美感和信息传递的效果。那么，在 CSS 中怎么实现这种效果呢？接下来，我们来介绍一些方法。

第一种方法是使用伪元素。将图片设置为容器的背景，并在容器中创建一个伪元素，再在伪元素中添加文字。

 .container {
        background-image: url('example.jpg');
    }
    
    .container::before {
        content: '这里是文字';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 

这种方法主要利用了伪元素的定位和 content 属性，通过设置其绝对定位和居中方式来实现文字覆盖图片的效果。

第二种方法是使用绝对定位。将图片和文字都放置于容器中，再利用绝对定位来将文字放置于图片上。

 .container {
        position: relative;
    }
    
    .image {
        position: relative;
    }
    
    .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 

这种方法要求容器的定位必须为相对定位，图片和文字都必须放置于相对定位的容器中，然后再利用绝对定位来实现文字放置在图片上的效果。

以上两种方法都能够实现文字放置在图片上的效果，选择哪种方法可以根据具体情况来决定。使用灵活和简洁的代码，能够使得效果更加优美。