[分享]css中如何把字放在图片上

在网页设计中，往往需要在图片上添加文字，以起到美化页面、概括图片主题及补充图片信息等作用。这时候，CSS可以帮助我们实现这个效果。下面简单介绍一下如何在CSS中把字放在图片上。首先，我们需要在HTML...

在网页设计中，往往需要在图片上添加文字，以起到美化页面、概括图片主题及补充图片信息等作用。这时候，CSS可以帮助我们实现这个效果。下面简单介绍一下如何在CSS中把字放在图片上。
首先，我们需要在HTML中插入一张需要添加文字的图片。代码如下所示：

 <div class="picture">
        <img src="picture.jpg" alt="这是一张图片">
        <p class="text-on-picture">这是图片上的文字</p>
    </div> 

这段代码中，我们使用了一个div元素将图片和文本包裹起来。在这个div元素内，我们插入了一张名字为picture.jpg的图片，并将其赋予了一个alt属性以便于屏幕阅读器对页面的识别和理解。同时，我们还使用了一个p元素来放置图片上的文字，该p元素的class属性设置为text-on-picture，以方便后续的CSS选择器选中。
接下来，我们需要使用CSS来实现把文字放在图片上的效果。代码如下所示：

 .picture {
        position: relative;
        display: inline-block;
    }
    .text-on-picture {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 18px;
        text-align: center;
    } 

在上面的代码中，我们为.picture选择器设置了position: relative;和display: inline-block;的样式，这是因为我们需要在该元素内设置.text-on-picture的position: absolute;来实现文字在图片上的定位。
接着，我们为.text-on-picture选择器设置了position: absolute;、top: 50%;、left: 50%;和transform: translate(-50%, -50%);的样式。这四个属性的作用是把文字在图片上居中并定位。具体来讲，top: 50%;和left: 50%;会把文字放在图片的中心位置，而transform: translate(-50%, -50%);会把文字向上向左移动50%，即把文字移动到图片中心。
除此之外，我们也可以给.text-on-picture选择器设置color、font-size和text-align等属性，来控制文字的颜色、字体大小和对齐方式等。这些属性可以按照设计需求进行自由组合。
综上所述，我们可以通过HTML和CSS的结合来实现把文字放在图片上的效果。在实际设计中，我们可以按照具体需求进行灵活的设置，以达到美化页面、概括图片主题及补充图片信息等目的。