今天我来和大家分享一下如何使用CSS代码来添加图片文字。
首先,我们需要准备一张图片和要添加的文字。假设我们选择了一张名为“cat.jpg”的图片,并且要在图片上添加“Hello World!”这段文字。
接下来,我们需要在HTML文件中添加一个标签来显示这张图片,并使用CSS代码来添加文字。代码如下:
<img src="cat.jpg" alt="一只可爱的猫咪"> <p class="imgtitle">Hello World!</p>在上面的代码中,我们使用了一个标签来显示图片,并在下面添加了一个
标签来显示我们要添加的文字。我们给这个
标签添加了一个类名“imgtitle”,以便在CSS中方便地对其进行样式调整。 现在,让我们使用CSS代码来添加文字。我们可以使用“position”属性来控制文字的位置,并使用“z-index”属性设置它的层级,以确保文字显示在图片上方。代码如下:
.imgtitle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; font-size: 24px; color: white; text-shadow: 1px 1px 1px black; }在上面的代码中,我们使用“position: absolute”来将文字相对于父元素的位置进行绝对定位,并使用“top”和“left”属性来将文字水平垂直居中。我们还使用“transform”属性来调整文字的位置。接下来,我们使用“z-index: 1”属性设置文字的层级,并使用“font-size”和“color”属性来设置文字的大小和颜色。最后,我们使用“text-shadow”属性为文字添加了一些阴影效果。 以上就是如何使用CSS代码来添加图片文字的方法啦!快来试试吧!